Header Ads

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!

9 comments:

  1. Jag kan inte få den i rätt storlek:-( Alltså den är inte så lång som min header utan bara så lång som min huvuddel (där inläggen finns)
    Jag är helt grön på detta med html... så uppskattar alla hjälp...!!

    ReplyDelete
  2. Vilken jättekul grej...har länkat till ditt inlägg...hoppas det är ok...kul sida förresten...har lärt mig mkt. här...

    ReplyDelete
  3. Länka på du - jag snodde lite länkar av dig när jag la upp nya forumet... :-0 *ler* fast inte så många! Jag har jättestor nytta av din sida, perfekt när man inte orkar googla.

    ReplyDelete
  4. Oh va jag är glad att du finns här som förklarar så otroligt bra och enkelt och smidigt..
    En annan fråga bara: Om jag vill ha lite mjukare kanter på själva knapparna, eller om jag vill ha en viss form på knapparna, vad gör man då?
    Här får man en färdig kod av dig, men om man skulle vilja göra en knapp själv i te.x photoshop, menar jag... mmm kanske jag kan komma på det, vi får se. Skam den som ger sig.
    Tack iallafall för din hjälp här!
    Michelin

    ReplyDelete
  5. Hur gör man nu när nya gadgeten "sidor" finns för att få knappar under headern? Tack för all hjälp man får här :) Jag har länkat hit från min sida så att andra också får ta del av dina jättebra tips o trix.
    MVH Elsa

    ReplyDelete
  6. Fantastisk bra blogg när man gillar att experimentera med sin egen blogg^^

    Jag har bara en fråga.
    Jag planerar att byta ut min navbar mot den som du beskriver här, men jag skulle gärna vilja ha egna bilder som knappar. Går det och isåfall hur gör jag?

    Tack på förhand!
    /Cecilia

    ReplyDelete
  7. Jeg har fått til alt, utenom at alt står veldig til høyre, hvordan midtstiller jeg "knappene"? Håper på svar.

    ReplyDelete
  8. MargeretheFL - Jag kan inte se någon meny på din blogg så tyvärr kan jag inte svara. Utan något att gå efter är det svårt att svara.

    ReplyDelete
  9. Hur får vi vår linkbar att få samma brädd som bilden den ligger under? Våra tre knappar hamnar bara på två rader när vi ökar pixelantalet... http://www.ladiesabroad.se/

    I testbloggen http://test-ladiesabroad.blogspot.se/ får vi alla knapparna att ligga på en rad och (nästan) matcha brädden på headern om vi ökar den totala sidbrädden till 1200 bildpunkter, men så vill vi ju inte ha det heller. Vi vill ha headerbild och linkbar i samma brädd och båda centrerade i förhållande till den totala sidbrädden.

    Tack för hjälp.

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------