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

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.