Hur du gör en egen linkbar

Vad är en linkbar undrar du kanske?
Jo, det är den där horisontella listan med länkar som vissa bloggar har under sin header. Du kan faktiskt göra en egen sån lista och matcha färgerna med din blogg.

Det första du får göra är att öppna din bloggs Layout - Redigera HTML.
Tryck på Ctrl+F så får du fram en liten sökruta/rad och i den skriver du in

</b:skin>

Du ska alltså söka reda på den taggen i din kodmall. Det går förstås också bra att leta efter den på egen hand

När du hittat taggen lägger du in den här koden precis ovanför, som i min bild.

a.navigation {
background: #4f4f4f;
color: #ffffff;
padding: 5px 15px 5px 15px;
border: 3px ridge #5f5f5f;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #6b6b6b;
color: #ffffff;
text-decoration: none;
border: 3px ridge #737373;
}

När du har gjort det sparar du din mall och går till bloggens Layoutläge.
Där lägger du till ett nytt sidelement för html-kod.
I rutan klistar du in följande kod:

div style="position: relative; right: 0px;">
          <a class="navigation" href="http://webadress">Din Länk 1</a>
          <a class="navigation" href="http://webadress">Din Länk 2</a>
          <a class="navigation" href="http://webadress">Din Länk 3</a></div>

Innan du spar ditt nya sidelement byter du ut
"http://webadress" mot de länkar du vill hänvisa till och
>Din Länk< mot namnet du vill ska stå i din linkbar.

Låt alla " och < stå kvar, byt bara ut text mot text. Det är nu det roliga börjar, designen av din linkbar. Byt ut färgkoderna, de siffror eller bokstäver som står mellan # och ; i koden du la in i din kodmall. Det finns många olika sidor på internet där man kan namnge en färg, här är en. Klicka på en färg i molnet till vänster och du får färgkoden i den första rutan till höger. Fortsätt tills du har en fin färgkombination och kopiera de koder du vill ha.

Prova olika färgkombinationer tills du är nöjd. Background är förstås länkens bakgrund och color står för länkens färg.
Färgkoderna som står under a.navigation:hover är de färgkombinationer som visas när du håller musen över länken, det som gör att länken sticker ut och visar att det faktiskt går att klicka där.

Vill du ha mindre eller större knappar?
Byt ut siffrorna i padding.
Sifforna motsvarar  topp-höger-botten-vänster.

Du kan byta ut ridge i border-delen mot solid om du inte vill ha en upphöjd kant på dina knappar eller ändra pixelantalet till noll om du inte vill ha en kant alls. Glöm inte att göra det i båda styckena.
Även här kan du ändra färg förstås och dessutom hur tjock din kant ska vara

Vill du inte ha din linkbar centrerad?
Du kan flytta den åt vänster genom att öka pixelantalet här i gadgeten:

          <div style="position: relative; right: 0px;">

Om du istället vill flytta den åt höger byter du ut right mot left (du knuffar linkbaren från det hållet).

Glöm inte att förhandsgranska innan du sparar dina nya färger i din kodmall!