Een nieuw onderwerp op nailnerdjess.com.. Iets non-beauty. Namelijk de HTML Tutorial voor blogger! Ik weet dat heel veel meiden die mijn blog bezoeken ook bloggen, of willen bloggen. Ik krijg dan ook ontzettend veel vragen “hoe heb jij dat gedaan met jouw lay-out? En hoe heb je dat nou weer gedaan?”. Wat ik je kan vertellen is dat heel veel met HTML gedaan is. HTML lijkt moeilijk (is het ook wel! Ik vind het ook lastig), maar als je het onder de knie hebt zeggen ze dat het makkelijk is. Ik ga jullie wat leuke dingen leren en als dit artikel goed loopt, veel lezers heeft en mensen dit leuk vinden wil ik het graag wat vaker gaan doen. En als het niet leuk is of niet goed bevalt, dan stop ik er mee! Zo simpel is het! Nou, ik hoop dat jullie er wat aan hebben en veel plezier!
Omdat dit de eerste keer is, had ik het idee dat ik beter wat makkelijker kon beginnen. Iets wat iedereen wel zou moeten lukken. Je hoeft hierbij dus ook helemaal niet in HTML te frotten, teninste bij één tutorial. Je moet namelijk gewoon wat toevoegen aan de gadgets en je bent klaar! Bij de tweede tutorial moet je nog wel met html werken, maar dat is niet zo moeilijk!
Zoekbalk veranderen
Laten we beginnen met het veranderen van je zoekbalk. Dit is heel erg makkelijk, maar je moet het wel snappen. Laten we het in stappen gaan doen.
Stap 1:
Ga naar blogger.com en log daar in. Als je bent ingelogd, druk dan op je blog. Ga naar indeling en druk dan op gadget toevoegen.
Stap 3.
Klik op het blauwe dingetje met dat kruisje er in en vul dit alvast in:
<input id=”search-box” name=”q” size=”50″ style=”background: #FFFFFF; border: 2px dashed #59554F;” type=”text” /><input id=”search-btn” src=”foto” type=”image” />
Stap 4.
Bij het rood gekleurde gedeelte in de tekst moet een code met jouw gekozen plaatje komen te staan. Je kunt dit maken in bijvoorbeeld paint. Ik denk dat iedereen dit wel kent en op haar computer heeft. Ik laat het dus met paint zien, maar je kunt het ook met allerlei andere programma’s doen, als het maar een .jpg bestand wordt.
Stap 5.
Stap 8.
Plak de code van hierboven nu in het stukje waar foto staat.
<input id=”search-box” name=”q” size=”50″ style=”background: #FFFFFF; border: 2px dashed #59554F;” type=”text” /><input id=”search-btn” src=”Foto” type=”image” />
Stap 9.
Nu ben je klaar! Sla het op en kijk of het werkt. Wil je graag dat jouw plaatje lang de zoekbalk komt te staan? Dat kan ook! Doe het dan zo:
<input id=”search-box” name=”q” size=”30” style=”background: #FFFFFF; border: 2px dashed #59554F;” type=”text” /><input id=”search-btn” src=”Foto” type=”image” />
Werkt het nog niet en komt hij nogsteeds niet langs de zoekbalk te staan? Wijzig de 30 dan in bijv. 25.
Succes en hopelijk werkt deze tutorial.
1 Comment
Super leuk artikel! Ik heb gelijk een back to top button op mijn blog gezet!
16 augustus 2015 at 14:04Dankjewel 🙂