Skapa en egen menylista med bilder

Vill du skapa en egen menylista under din header, knappar som leder till olika sidor eller etiketter etc om du klickar på dem?

När jag ska designa något nytt till min blogg börjar jag med att öppna photoshop. Sen går jag till min blogg och tar ett screenshot av den. På så vis kan jag öppna en bild med min blogg i mitt bildhanteringsprogram och arbeta i lager ovanpå den. Då ser jag direkt om knapparna får rätt storlek och hur de passar.

Här är mitt screenshot med ett lager med knapparna jag vill ha ovanpå.

Med den här koden kommer inte någon text att synas igenom dina bilder så skriv den text du vill ha direkt på dina knappar!

Eftersom jag har lagt till skuggor väljer jag att spara mina bilder i png.format, men om du inte har någon transparant del i din bild väljer du kanske hellre jpeg.

Spara varje knapp för sig.

Ladda upp dina bilder på Photobucket eller liknande sida.

Nu är det dags att öppna din bloggs kodmall.

Du ska klistra in följande kod:

a.navigation {
display:inline;
padding: 5px 5px 5px 5px;
/* paddingsiffrorna styr: uppåt - höger - nedåt - vänster*/
border-width: 0;
}

och du kan göra det precis ovanför   ]]></b:skin>

Tryck på Ctrl och F på ditt tangentbord så kommer det fram en sökruta. Fyll i ]]></b:skin> som här ovan och tryck på enter. Då kommer du till rätt plats i din bloggmall utan att behöva leta dig fram.

Som  du ser har jag lagt in en liten rad som förklarar vilken av paddingsiffrorna som flyttar bilderna åt vilket håll. Med de här siffrorna kan du separera knapparna mer eller flytta ihop dem, likaså öka avståndet till headern uppåt och din main och sidebar nedåt. Testa så får du se vad som händer.

Nu går du vidare till din bloggs layoutläge och öppnar en gadget under din header. Välj HTML/Javascript. Fyll i följande kod i rutan:

<p align="center">

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>
<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>
<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a></p>

Den här koden ger dig fyra länkar och den lägger sig mitt under headern. Om du vill flytta länkarna så att de blir vänstercentrerade skriver du left istället för center och för högercentrering skriver du right.

Hämta dina bilders direktlänkar från Photobucket och klistra in dem där det står bildadress i den ordning du vill ha knapparna. Byt ut webadress mot den sidas webadress du vill länka till.

Ett tips är att länka till en viss etikett på din blogg, kanske foton eller djur/barn - vilka etiketter du nu har. Då gör du det lätt för din besökare att hitta inlägg som intresserar dem.

Spara din gadget när du är klar.

Du kan alltid lägga till fler rader med adresser och bildlänkar om du vill. Var i så fall noga med att behålla <p align="center"> i början på koden och </p> i slutet. Det är med det här du kan styra åt vilket håll dina etiketter ska ligga åt. 

En ny rad med länkar ser alltså ut så här:

<a class="navigation" href="http://webadress"><img src="http://bildadress" /></a>