Pages

Wednesday 19 February 2014

HTML Cursus #1: Label widget met dropdown

Misschien denk je bij de titel al: "Waar heeft ze het nu nou weer over?" Ik ga jullie namelijk HTML cursussen geven! De credits van dit idee gaan naar Luna, maar ik zou het toch graag zelf ook doen, want je kan zo veel verschillende dingen met HTML! Ik ga jullie bij deze eerste cursus leren hoe jullie een label widget met dropdown kunnen maken. Zelf heb ik dat ook, dus als je niet begrijpt wat ik bedoel kan je het op mijn blog zien. Voor HTML moet je wel een beetje handig zijn met computers, maar ik hoop dat jullie het dankzij deze tips wel kunnen! Let op! Deze cursus is alleen voor Blogger.




  1. Als eerste ga je naar blogger > je blog > sjabloon > html bewerken. 
  2. Druk op ctrl+f (bij mac command+f) om het zoekbalkje te openen. Je moet hiervoor wel al met je muis op een random stukje hebben geklikt bij je html, zodat zo'n knipperend schrijfbalkje daar staat. (Ik hoop dat ik dat een beetje handig heb uitgelegd...)
  3. Zoek op: label. Als het goed is heb je nu deze code gevonden: <b:widget id='Label1' locked='false' title='' type='Label'/>
  4. Verplaats de code van de vorige stap in: 

<b:widget id='Label1' locked='false' title='Labels' type='Label'> 
<b:includable id='main'> 
<b:if cond='data:title'> 
<h2><data:title/></h2> 
</b:if> 
<div class='widget-content'>
<select style='width:75%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Kies een onderwerp...</option> 
<b:loop values='data:labels' var='label'> 
<option expr:value='data:label.url'><data:label.name/> 
(<data:label.count/>) 
</option> 
</b:loop> 
</select> 
<b:include name='quickedit'/> 
</div> 
</b:includable> 
</b:widget>

Het gele stukje kan je veranderen om de breedte van het balkje te veranderen. Het rode stukje kan je veranderen om de tekst in het balkje te veranderen.

Let op: Het kan zijn dat blogger de code niet accepteert. Hij heeft dan een stukje rood gehighlight, waarschijnlijk is dat </b:widget>. Dat kan je gewoon weghalen. 
Weet je niet zeker of je blog er wel goed uit komt te zien? Je kan altijd op voorbeeld drukken voor je opslaat, zodat je kan zien of het er goed uit komt te zien.

Hopelijk begrijpen jullie het. Vertel het me maar als het je is gelukt!

1 comments:

Thanks for your comment! You made my day ♡