13 jul 2014

Hoe doe je dat: Header met klikbare links



Ik krijg vaak de vraag hoe ik het 'klik menu' (dat gedeelte met home, looks, about etc.) boven mijn header krijg. Dat is eigenlijk helemaal niet moeilijk en ik weet zeker dat jullie het allemaal kunnen! Dus hier de nodige uitleg over de header met klikbare links.




Wat is een header?
Een header is het bovenste gedeelte van je website. Het is makkelijker om te laten zien. Het rood omlijnde gedeelte is de header.

Nu je weet wat een header is kunnen we verder. We gaan onze eigen header maken!
--------------------------------------------------------------------------------------------------------
1. Open een programma waarmee je iets kunt maken. Photoshop bijvoorbeeld, maar Picmonkey is een goede optie! (http://www.picmonkey.com/). In dit geval neem ik voor jullie Picmonkey.
Open 'design'.
--------------------------------------------------------------------------------------------------------
2. Open nu een ander tabblad. 
Eens kijken hoe breed je blog is! Ga naar Indeling > Sjabloonontwerper > Breedte aanpassen. Kijk daar naar de breedte van de gehele blog. In het geval van mijn testblog 960. 
--------------------------------------------------------------------------------------------------------

3. Ga naar Picmonkey (of een ander programma). Bij de eerste vul je de grootte in die je bij stap 2 hebt bekeken. Ik vind 960 x 350 wel mooi. Dus dat doe ik. Dit vul je in bij 'Change size to' (zie plaatje) Nu is je werkruimte de grootte die je wilt.
--------------------------------------------------------------------------------------------------------
4. Nu kun je beginnen met het ontwerpen van een header. Hier onder zie je verschillende opties. Als je de letters boven het klikmenu plaats zul je daar straks ook kunnen klikken. Het kan natuurlijk ook met een streep en onder de titel. 
Ik ben uiteindelijk gegaan voor deze: 
Hij is nogal simpel, maar het is alleen voor de uitleg.
--------------------------------------------------------------------------------------------------------
5. Er staat automatisch al een titel boven je blog. Die moet weg, maar die kan niet verwijderd worden. Dit moeten we dus doen met html. Klik op 'HTML bewerken'. 
Selecteer 'Header 1'

Ga opzoek naar het rood omlijnde stuk hieronder. Het is mogelijk dat je iets (ong. 2 regels) omhoog moet scrollen.
Verander de rood omlijnde dingen in wat hieronder staat.
maxwidgets= '1' verander je in maxwidgets= '3'
showaddelement= 'no' verander je in showaddelement= 'yes'
locked= 'true' verander je in locked= 'false'

Klik nu op 'Sjabloon opslaan. Ga naar Indeling > En naar de kop > klik op bewerken. Nu kun je onderaan op verwijderen drukken.
Nu is je koptekst verwijderd. :)
--------------------------------------------------------------------------------------------------------
6. Ga naar deze website: http://www.image-maps.com/
Klik op 'Browse for file' en klik de header aan die jij hebt gemaakt. Klik nu op 'Start Mapping' > click to continue. Klik op je linkermuisknop en dan op 'create rect'. Hiermee ga je een vierkant maken om het gedeelte waar je op moet kunnen klikken. 
In het rood omlijnde gedeelte moet je de pagina link invullen waarnaar het het in mijn geval 'Home' gedeelte moet verwijzen. Klik op Save. Doet dit bij alle stukken die klikbaar moeten zijn.
 --------------------------------------------------------------------------------------------------------
6. Klik weer op je linkermuisknop en op 'get code'. Ga naar 'HTML code', scrol naar onder en kopieer de code.
 --------------------------------------------------------------------------------------------------------
7. Ga naar Blogger en klik op 'Een gadget toevoegen'. Ga voor HTML JavaScript.
Plak je code in het vakje en klik op opslaan. Klik ook op 'Indeling Opslaan' rechts bovenin.
 --------------------------------------------------------------------------------------------------------
Je bent nu klaar en als het goed is doet je header het nu! :). Veel plezier ermee.

Als je iets niet snapt, laat dan graag een reactie achter. :)