Header Ads

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>

15 comments:

  1. Åååå,va Bra :)
    Ska ta mig en funderare kring detta & min blogg ♥
    Tack!!!

    ReplyDelete
  2. God kväll :)
    Gillar dina inlägg mycket då jag gillar att trixa runt lite med bloggen.
    Att lägga till knappar har jag spånat på ett tag och så hittar jag din toppenbeskrivning :)
    Har lyckats göra två och länkat dem till rätt ställe men så kom jag till mina inläggs ETIKETTER. De finns ju i en gadgat, hur sjutton hittar jag länken jag behöver ha, för att länka till dem? Eller måste jag ha en knapp för varje etikett? Klurigt.... :) Ha en trevlig kväll :)

    ReplyDelete
  3. Om du vill ha en knapp som visar all inlägg med etiketten "hund" klickar du på den etiketten i din gadget och när de inlägg som har den etiketten visas (alla radas upp under varandra) kopierar du adressen uppe i webläsaren och använder den som länk till din "hund"-knapp.

    Det är ju ingen mening att ha en knapp som heter etiketter eftersom du säkert satt en etikett på alla inlägg och det innebär att alla inlägg visas. Eller missförstår jag dig nu? ;-)

    Lycka till!

    ReplyDelete
  4. Är det gratis? att göra så?

    Jag har sett den gadgeten okså (att man typ kan göra så) och är det gratis?! Isåfall ÄLSKAR jag blogspot!

    ReplyDelete
  5. Eh, ja? Det är gratis! Det är väl inte mycket med blogspot som kostar något, möjligtvis någon specialdesignad bloggmall från någon privat designer... Det kan ju eventuellt finnas någon sida som säljer gadgetfunktioner också, men jag har inte sett någon hittills.

    Så skapa din meny du! ;-)

    ReplyDelete
  6. ehmm min bloggspot har inte nån form av layoutläge där man kan lägga in nån form av html kod alls när man ska sätta till egna ikoner m:m under lägg till gadget under header :(

    ReplyDelete
  7. Superbra! Äntligen fick jag till det så som jag ville på min blogg tack vare detta!

    Kan man göra så att man får en rullgardin på varje sida? Jag vill exempelvis ha en knapp där det står William på och om man håller musen över där eller klickar så vill jag att det ska komma en gardin där det finns andra etiketter som "0-3mån", "3-6mån" osv.

    ReplyDelete
  8. Tack, tack tusen gånger tack!! Äntligen fattar jag hur jag ska göra. Nu ska jag bara få det snyggt oxå. Hehehehe....

    ReplyDelete
  9. Hej! vad snyggt! jag undrar om jag kan få hjälp med att göra en sån för jag kan inte har försökt..... jag vill jätte gärna ha en sån!!!! hoppsa du kan hjälpa min /http://bodbacksbjorna.blogspot.com/

    ReplyDelete
  10. Som jag har letat..borde förstått att du hade fixat detta..gjort ett inlägg på Fix och Trix med länkning till detta inlägg..ha det..Maria

    ReplyDelete
  11. Hej!
    Jätte bra blogg du har.
    Jag har lagt in en menylista men får inte knapparna att ligga nära varandra med bara nån centimeters mellanrum. Och när jag lägger in fler än 5 knappar hamnar dom på raden under.
    Kan du hjälpa mig med detta?
    moderpetra.blogspot.com

    ReplyDelete
  12. ModerPetra - du har gjort dina knappbilder med jättestort utrymme på båda sidor om knapparna, alltså tomutrymme. Det är det som gör att du inte får ihop dem, kika på det här skärmklippet så ser du:

    http://i.minus.com/iZbgHb9BrVSQJ.png

    Gör om dina knappar, beskär bilderna precis i utkant på själva knappen så får du ihop dem mkt bättre.
    Sen kan du även minska på den andra siffran i paddingen, sätt 0 istället för 10px

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

    ReplyDelete
  13. Hej!

    Hur gör man för att få bort mellanrummet helt? Jag har gjort som ett bannerband, har klippt varje bit för sig och helt kant i kant utan några mellanrum. Har även ställt ner ALL padding till 0 px. Går det att ta bort marginalen helt också?

    Min blogg:
    http://elenoree.blogspot.se/

    Tack på förhand!

    ReplyDelete
  14. Ibland kan man behöva använda negativt padding, t ex -10px,5px,-10px,5px lr liknande. Jag skulle nog prova mig fram lite o se.

    ReplyDelete
  15. Tack för tipset, men får verkligen inte till det. Det får vara som det är då! :-)

    Tack i alla fall!

    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.
-------------------------------