HTML-cursus #1: Verander 'Berichten weergeven met het label ...'

zaterdag 4 januari 2014 |



Ik heb een nieuwe serie bedacht voor op mijn blog: de HTML-cursus! Dit omdat ik weet dat bloggers HTML één van de moeilijkste dingen van het bloggen vinden. In elk deel van de HTML-cursus ga ik één of twee tutorials geven waardoor jij je blog wat kunt veranderen of verbeteren. Let op: Deze tutorials zijn voor Blogger-gebruikers! In HTML-cursus #1 gaan we 'berichten weergeven met het label ...' veranderen. Dit bericht krijg je als je een label/tag/categorie aanklikt. Klik op 'lees verder' voor de tutorial.

'Berichten weergeven met het label ...' veranderen! Van dit:
Naar bijvoorbeeld dit:

Hoe werkt dit?
In een paar stappen ga ik uitleggen hoe je 'berichten weergeven met het label ...' kunt veranderen. Eerst ga je naar Blogger > Sjabloon > HTML bewerken. Zoek deze lijn op (CTRL + F):

<b:includable id='status-message'> ... </b:includable>

Klik op het zwarte pijltje ernaast (links) om het uit te vouwen, zodat je de hele code ziet. Zo ziet de code eruit:

<b:includable id='status-message'>
 <b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/> 
</div> <div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Het geel gemarkeerde deel van de code hierboven verander je in:

Artikelen in de categorie <data:blog.searchLabel/>

Nu heb je alleen nog maar de tekst veranderd in: Artikelen in de categorie (en dan het gekozen label). Je kunt ook een andere tekst kiezen, zoals: Posts met labels. Dat is aan jou! Maar we zijn er nog niet. We gaan nu de look veranderen.

We gaan naar het CSS-gedeelte. Dit kun je vinden bij Blogger > Sjabloon > Aanpassen > Geavanceerd > CSS toevoegen. Kopieer wat hieronder staat en plak het daar.

/* Label Status Message
-----------------------------------------------*/
.status-msg-body {    /* Dit verandert het lettertype en de kleur van het lettertype  */
font: 16px, 'Helvetica';
color: #000;
text-transform: lowercase;
}
.status-msg-bg {    /* Dit verandert de achtergrondkleur */
background-color: #FFFFFF;
}
.status-msg-border {   /* Dit verandert de rand eromheen */
border: 1px #CCCCCC solid;
}

De CSS kun je zelf aanpassen. Vergeet het daarna niet op te slaan. Hier kun je kleurencodes vinden.Wil je dat de label message een rode achtergrond heeft? Dan verander je background-color: #FFFFFF; in background-color: #FF0000;. Dit is maar een voorbeeld, je kunt kiezen wat je wilt! Met HTML is het altijd een beetje uitzoeken. Probeer eens wat dingen met de CSS-code, hier leer je ook weer van! Mocht je nog een vraag hebben, laat hieronder een reactie achter.

Succes! XO, Luna.

49 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Wat een handige serie! Ik vind HTML-codes nog best lastig. Ik ga het denk ik zo proberen :)

    BeantwoordenVerwijderen
  2. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  3. Superleuk, deze reeks! Ook handig dat het voor Blogger-gebruikers is, meestal is het voor Wordpress. Ik wil echt graag HTML leren!

    BeantwoordenVerwijderen
  4. Ik vind het echt heel lief dat je andere bloggers helpt met dit soort dingen! Het is echt heel handig! Fijn weekend. Xxx

    BeantwoordenVerwijderen
  5. Super handige html-tip :) ik zelf doe er nu nog niets mee in mijn blog, maar ik houd hem in mijn achterhoofd als ik hem ooit nodig heb!
    Liefs, Demi

    BeantwoordenVerwijderen
  6. Super leuk dat je dit gaat doen!
    Kan niet wachten om het volgende artikel te zien :)

    Liefs, Susan

    BeantwoordenVerwijderen
  7. Super handig! Via jou uitleg snap ik het wel, kan niet wachten tot de volgende posts!
    Thanks Luna.
    Liefs

    BeantwoordenVerwijderen
  8. Wat super handig! Ik moet hier echt een keertje voor gaan zitten.

    BeantwoordenVerwijderen
  9. Super handig, ik moet er wel even voor gaan zitten. Wil je ook uitleggen hoe je de voettekst verandert? En zoals bij mijn blog staat 'startpagina' & 'Abonneren op: Berichten (Atom)' hoe je dat weg moet halen? Of even in een mailtje sturen :).

    x

    BeantwoordenVerwijderen
  10. Dit is echt een heel handige en fijne serie Luna! Thanks girl <3

    BeantwoordenVerwijderen
  11. Wow, wat een superhandige tip! Deze ken ik nog helemaal niet en wat tof dat je zo'n serie hiervan maakt! Ik vind het altijd leuk om nieuwe dingen te proberen en deze ga ik zeker maken! Heel tof, dank je wel voor de tip en ik ben benieuwd naar de andere tutorials!
    liefs

    BeantwoordenVerwijderen
  12. Heel handig, ik ben ermee begonnen en ik leer beetje bij beetje. Wel lief dat je deze serie artikelen bent begonnen.

    BeantwoordenVerwijderen
  13. Heel leuk en interessant!!
    http://vanilleklokje.blogspot.be/

    BeantwoordenVerwijderen
  14. Super leuk en handig dat je deze serie maakt!! Ik snap zelf niet zoveel van HTML codes maar ik ga het nu toch maar proberen denk ik haha ;P. Ik heb nog wel een vraagje hoe bewerk/maak jij het plaatje aan de bovenkant van je blog? :) (het gedeelte waar staat Luna's Lovely World) en hoe voeg je dat in je blog? :)
    xxx Sarah

    BeantwoordenVerwijderen
    Reacties
    1. Met het programma 'Photofiltre', daar kun je best veel mee! Op internet kun je het downloaden en er dan mee experimenteren. Als je het als plaatje opslaat kun je het bij Blogger > indeling toevoegen bij je kop (header).

      Verwijderen
  15. Wat leuk dat je dit met ons deelt! Ik ben helemaal niet handig met HTML, maar misschien helpt dit mij op weg.

    Groetjes Senna

    BeantwoordenVerwijderen
  16. Wauw, super handig Luna! Ik ga er zo even mee experimenteren, echt fijn dat je dit doet. Kunnen mensen veel van leren :)

    BeantwoordenVerwijderen
  17. Superhandig Luna, heb het meteen toegepast op mijn blog! Lijkt me echt heel leuk om meer series te zien hierover, vind het altijd leuk om nog meer te lezen over HTML en dat soort dingen. Liefs!

    BeantwoordenVerwijderen
  18. Echt weer heel handig!

    BeantwoordenVerwijderen
  19. Wat een handige en duidelijke tutorial, heel leuk luna!
    Hoewel ik inmiddels al aardig veel weet van html (ik kan wel sites in elkaar zetten maar ik wil het nog wat uitgebreider kunnen haha) is dit wel heel handig! Sommige opties van blogger ken ik zelf ook nog niet (deze kende ik bijvoorbeeld niet). Meestal ga ik dan even googlen, maar dit is nog veel handiger als het duidelijk op een blog staat, leuk!

    BeantwoordenVerwijderen
  20. Ik wilde deze tutorial toepassen, maar als ik ctrl f doe en dan zoek naar ... , vind het zoekbalkje niet :((

    BeantwoordenVerwijderen
    Reacties
    1. Staat dat balkje niet gewoon rechtsbovenin de pagina? Gebruik je chrome?

      Verwijderen
    2. Dat precies heb ik ook? Hoe kan dat. Ik gebruik gewoon Chrome

      Verwijderen
  21. Super handig! Goed om te weten:)

    BeantwoordenVerwijderen
  22. Dit lijkt me een heel handig idee! Ik zou graag willen weten hoe je de 'meer lezen'-knop kan vervangen door een afbeelding en ik vind hier nergens info over. Misschien een ideetje voor de volgende post! :)

    BeantwoordenVerwijderen
  23. Super handig alleen snap ik het nog niet zo

    BeantwoordenVerwijderen
  24. Superhandig! Binnenkort maar eens proberen =)

    BeantwoordenVerwijderen
  25. Wat een handige serie! Ik vroeg me al een keertje af hoe je het moet doen, want op een mobiel komt een stukje van zo'n lange tekst over de datum heen en dat staat niet zo netjes. Ik ga hem zometeen veranderen!:)

    BeantwoordenVerwijderen
    Reacties
    1. Het is gelukt, heel erg bedankt voor dit artikel! Ben benieuwd naar de verdere artikelen hierover:)

      Verwijderen
  26. Super handig! HTML is inderdaad best lastig soms.. Ik ben benieuwd naar je andere tips!

    ♥ Saskia

    BeantwoordenVerwijderen
  27. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  28. super handige serie! Hij werkt bij mij!

    BeantwoordenVerwijderen
  29. Gelukt! Echt heel erg bedankt! Ben benieuwd naar de volgende cursus :)

    BeantwoordenVerwijderen
  30. Bij mij wilt hij het maar niet doen, als ik die html-codes opzoek dan staan ze er niet in zegt ie.. AAAH help!!

    BeantwoordenVerwijderen
  31. Heey als ik nadat ik op html bewerken heb geklikt typ ik ctrl F
    dan verschijnt er een zoekbalk waar ik de code ... invoer.

    maar vervolgens kan ik die code niet vinden :(

    Xx Julia

    BeantwoordenVerwijderen
    Reacties
    1. Ja, ik ook :( Luna, help! :)

      Verwijderen
    2. Vergeet niet eerst op het html-vak te klikken met je muis, dan pas ctrl+F gebruiken!

      Verwijderen
  32. wat bedoel je met zoek deze lijn op???

    BeantwoordenVerwijderen
  33. Wat een handige series, ik heb nu al meerdere tutorials via jou gebruikt en het bevalt me erg goed! Thanks !

    BeantwoordenVerwijderen
  34. Handig artikel dit. Als ik deze code invoer ... , dan wil hij hem niet herkennen. Enig idee waarom? Liefs,

    BeantwoordenVerwijderen
  35. Hoi! Ik zoek de hele tijd al op internet naar een antwoord, maar kan het niet vinden op mijn vraag. Zou jij misschien kunnen helpen? Ik vraag me namelijk af hoe je een banner in het midden van je pagina kan krijgen, ik heb een banner gemaakt via internet en wil hem graag in het midden hebben, maar dat lukt niet.. kan iemand me helpen?

    Liefs en alvast bedankt als iemand ooit reageerd.

    BeantwoordenVerwijderen