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>

 

Skapa din egen profilsida

Den här sidan känner du säkert igen och den är ju inte så skoj precis. Det tyckte inte Agnes på Fixas Forum heller, så hon skapade en egen profilsida och länkade till. Visst är det smart!
Hur den ser ut kan du se nederst i det här inlägget och om du klickar på bilden från hennes blogg kan du se hur det fungerar på riktigt!


Så här gör du om du vill byta ut eller lägga till en egen sida (eller flera kanske?)

Börja med att skapa din sida i photoshop eller annat bildhanteringsprogram.
En bild som är ca 1200 x 1000 pixlar är ganska lagom, då syns hela sidan på de flesta skärmar.



När du har skapat en bra sida med det du vill ha med - text, foton, andra bilder etc spar du den.

Om du väljer att spara bilden som png utan ett lager med bakgrundsfärg kommer bilden att smälta in fint i webfönstret och inte ge några kanter. Dock blir ju bakgrunden vit då, så vill du ha en annan färg får du lägga till det och spara bilden som jpeg.

Nu är det dags att länka din nya sida.
Börja med att ladda upp bilden på photobucket eller den sida du använder för att spara dina bilder på nätet.

Kopiera den här koden och klistra in i ett Anteckningsdokument eller liknande:

<div id='minprofil'><a href='http://DinBildsDirektlänk'>min profil</a></div>

Den röda delen är det som kommer att stå som länk. Byt ut till vad du vill.
Byt den blå markeringen mot din bilds direktlänk.
Du kan också göra samma sak direkt i din kodmall om du föredrar.

Om du inte redan har en gadget med About me/Profilsida börjar du med att lägga till den.

Sen är det dags för länken att klistras in. Gå till din bloggs kodmall - Redigera HTML.
Kryssa i rutan för Utökade Gränssnittskomponentmallar.
Nu ser du hela din bloggmall.

Klicka på CRTL och F på ditt tangentbord, då får du fram en sökruta/rad. Skriv in about i rutan. Tryck enter.


Nu har du kommit till rätt plats i mallen.
Titta efter den här kodraden:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

Om du vill byta ut länken i din bloggs gadget About Me (profilen) till enbart din egen länk markerar du den här raden och klistrar in din länkkod istället. Den här raden ska alltså bort.

Om du hellre vill ha kvar profillänken och dessutom lägga till din egen länk klistrar du in din länkkod under den här raden. Du kan ha fler länkkoder om du vill länka till flera sidor, men då får du ge varje länkkod ett eget id. Den här koden heter minprofil så din andra länk kan heta minprofil2 eller något liknande. Huvudsaken är att det inte finns en annan kod med samma id.

Spara din mall.


Nu har jag bytt ut länken på bilden nedan.
Här nedan hittar du Agnes blogg som hon har designat själv. Du hittar hennes profilsida om du klickar på Info. Tack för den bra idéen Agnes!

Popupruta för bilder

Skulle du vilja kunna länka dina små bilder i din sidebar till en större bild i en popupruta?
Eller kanske länka en text till en popupbild?

Då ska du göra så här:

Börja med att se till att du har en bild i två storlekar, en liten lagom till din sidebar (ca 200 pixlar om du har en normalbred sidebar) och en större i valfri storlek.
Ladda upp dem på t.ex. Photobucket så att de får en webadress - en direktlänk - vilket är det vi ska använda oss av.

Gå till din bloggs Layoutläge och klicka på Lägg till en gadget, välj HTML/Javascript.

Klistra in följande kod i din ruta:

<a href="http://DINSTORABILDSADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><img border="0" alt="" src="http://DINLILLABILDSADRESS"/></a>

Byt ut adresserna (de med stora bokstäver + http://) mot respektive bilds direktlänk. Din lilla bilds adress är alltså länken till den bild som ska synas i sidebaren. 

I koden finns orden width och hight. Efter dem kommer siffror vilket är pixelmått och de avgör hur stor din popupruta ska vara. Om din bild är säg 500x700 pixlar så byter du förstås ut siffrorna till det. Width mot din bilds vidd, hight mot din bilds höjd.


Dessutom finns ord som scrollbar, menubar, toolbar och status. Du kan byta ut no mot yes eller tvärt om för att anpassa popuprutan efter ditt tycke och smak. Vill du att dina gäster ska kunna surfa vidare från popuprutan - ja då väljer du toolbar=yes. Vill du att de ska kunna lägga till ditt foto bland sina favoriter - ja då väljer du menubar=yes. Prova dig fram till vad som känns bäst.

Spara din gadget. 

Om du istället vill ha en vanlig textlänk som leder till en bild ska du använda följande kod:

<a href="http://DIN BILDS ADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">DIN LÄNKTEXT</a>

Du klistrar in den i en HTML/Javascript gadget precis som med bild/bild-länken.

Nu kan du ju utvidga det här konceptet om du vill. Kanske länka en bild till en text, ett blogginlägg eller till en scrappad layout av samma bild. Du kan länka till vad som helst som har en webadress.

Länka rätt!

Att skriva rätt länkkod kan kännas som en hel vetenskap i början.
Du kan i princip alltid skriva in en egen html-kod och göra en egen länk, även om det här lilla tecknet inte finns där du skriver

Det kan t.ex. vara i en html-gadget eller i en kommentarsruta på någons blogg.


Vi kan dela in länkarna i tre varianter -

• Länka med ord
  
• Länka med bild
  
• Länka till en emailadress
  

I variant 1 vill du ha en textlänk, understrukna ord som visar att här finns en länk att klicka på.
Då ser koden ut så här:

<a href="http://DinLänk">DinText</a>

Du skriver in den webadress du vill länka till och den text du vill att dina läsare ska se.
Enkelt och praktiskt.

Om du dessutom vill lägga till att länken ska öppnas i en ny flik så att besökaren har din sida kvar öppen behöver du lägga till en liten kodsnutt. Då ser koden ut så här:

<a href="http://DinLänk"target="_blank">DinText</a>

I variant 2 vill vi ha en bild som länkar till en sida då vi klickar på den.
Ett exempel på en sådan bild är en banner som länkar till någons blogg eller websida.



Då ser den enklaste koden ut så här:

<a href="http://DinLänk"><img src="http://DinBildadress"/></a>

Här skriver du bara in länken till websidan och bildens direktlänk.

Om vi däremot vill ha en bildlänk som öppnas i en annan flik och dessutom har en alt-tagg där du kan skriva in ett sökord till bilden ser koden ut så här:

<a href="http://DinLänk" target="_blank"><img alt="BildensSökord" src="http://DinBildadress"/></a>

Anledningen till att vi lägger till ett sökord är för att Google och andra sökmotorer lättare ska kunna indexera bilden och din bild hamnar högre upp i sökresultat. Bra om du vill få besökare till din blogg med andra ord!

När du väljer sökord, tänk dig vad någon annan skulle googla/söka på. Det är troligare att de söker på hund eller golden retriver än din hunds namn "Pluto"

Om du bara vill använda dig av Öppna i nytt fönster kan du bara radera orden BildensSökord.

Och, till sist, länka till en mailadress.

Om du vill ha en textlänk till en mailadress ser koden ut så här:

<a href="mailto:DinEmailadress">DinText</a>

Om du vill länka en bild till en mailadress ser koden ut så här:

<a href="mailto:DinEmailadress"><img src="http://DinBildadress"/></a>

Ett tips är att kopiera de här koderna och spara dem i ett anteckningsdokument på din dator.
Det sista man vill när man vill länka lite snabbt är att börja leta efter vart man såg de där länkkoderna - vilken sida var de nu på???

Lägg till en bannerlänk

Har du sett att vissa har små bilder i sidokolumnerna på sin blogg, små "banners" som länkar till andra bloggar eller hemsidor?
Visst ser det lite roligare ut än bara en länk!

Men hur gör man då för att lägga in dessa banners och hur gör man sin egen att dela med sig av?

Börja med att se om dina favoritbloggar/hemsidor har en banner att dela med sig av. När du har hittat bilden (oftast ligger de högt upp i bloggarna för att vi besökare tydligt ska se dem och hämta hem dem, men du kan alltid fråga en blogginnehavare om denne har en banner att dela med sig av om du inte hittar den själv.)

Högerklicka på bannern och välj Egenskaper.


Nu får du fram en ruta som talar om vart bilden länkar och vilken webadress den har. Det är de här uppgifterna du ska använda!

Om du använder Internet Explorer visas bara bildens adress, inte websidans, så spar fönstret med bloggen vill länka till öppet så du kan kopiera adressen strax.



Spara rutan framme, stäng inte ner den.
Gå till din bloggs Layoutläge, välj Lägg till en Gadget.
Välj HTML/Javascript.


Klistra in följande kod i rutan.

<a href="http://WEBSIDANS ADRESS" target="_blank"><img border="0" alt="" src="http://BILDENS ADRESS"/></a>

Om du vill klistra in fler banners i samma gadget går det utmärkt, men se då till att du har ett mellanrum mellan koderna, två radbrytningar.


Titta nu på bannerns ruta med egenskaper igen.
Du ska byta ut den första http:// adressen i koden mot adressen till websidan du vill länka till (1.)
Det är alltså den första adressen i egenskapsrutan.

Sedan ska du byta ut den andra http.// adressen i koden mot bildens webadress, (2.) den andra adressen i rutan.


När du är klar sparar du din nya gadget.

Svårare än så var det inte att lägga till banners som länkar till dina favoritbloggar.


Kanske blir du nu lite sugen på att själv skapa en bild som andra kan lägga till på sina bloggar?
Då får du börja med att skapa en bild.
Öppna ditt bildhanteringsprogram och skapa en bild som är mellan 150 och 200 pixlar bred.
De flesta sidokolumner ligger omkring den storleken och vi vill ju att vår banner ska passa in.

Du kan göra bilden mindre om du vill, men om du går över 200 pixlar kanske dina besökare väljer att inte använda din bild alternativt så kommer inte hela att synas på deras blogg om sidokolumnen är för smal.

Du kan använda foton, text, mönster eller vad du vill, men tänk på att bilden är liten så att du inte gör den för otydlig och rörig.


Spara din nya banner!

Ladda upp den hos en webhost, t.ex. Photobucket.

Nu går du på samma vis som tidigare till bloggens Layoutläge, Lägg till en Gadget.
Välj HTML/Javascript.

När du har klistrat in koden i rutan är det dags att lägga till adresserna.

<a href="http://WEBSIDANS ADRESS" target="_blank"><img border="0" alt="" src="http://BILDENS ADRESS"/></a>

Din adress till din blogg lägger du i den första http:// adressen.
Din bilds direktlänk lägger du i den andra adressraden.
Spara din gadget.



Nu har du en egen banner som andra kan hämta hem till sin blogg.

Och, om de frågar hur de ska lägga in den kan du förstås gärna länka hit!

Om du vill få lite hjälp på traven att göra din egen banner kan du titta på den här sidan:
Bannerfans
Du kan själv bestämma hur stor din banner ska vara, lägga till en egen bild och sen dessutom få den uppladdad via Bannerfans och sen använda deras adress. Mycket praktiskt!

Öppna en länk i nytt fönster

Det finns många åsikter om huruvida länkar på en websida ska öppnas i det webfönster som används eller i ett nytt. Båda varianterna har sina för- och nackdelar.

Som ägare till websidan vill vi att våra besökare ska stanna kvar och säger därför genast att ett nytt fönster ska öppnas för varje länk, åtminstone de externa.
Det är däremot inte önskvärt att ett nytt fönster öppnas för varje intern/egen länk på sidan, det ger garanterat irriterade läsare och det vill vi ju inte ha.

Som besökare är det inte lika självklart. Många öppna fönster/tabs kan kännas rörigt och det är lätt att bli irriterad när ett nytt fönster innebär att tillbaka-knappen inte fungerar.

Det är enkelt att själv välja att öppna en länk i ett nytt fönster, genom att hålla nere Ctrl samtidigt som man klickar på länken eller genom att klicka med mittenknappen på musen. Det ger besökaren ett mer självständigt val och vi vill ju att vår sida ska vara användarvänlig.

Själv anser jag att åtminstone länkar i blogginlägg ska öppnas i nytt fönster så att den som läser kan titta på vad det var bloggskribenten ville visa men sedan lätt kunna gå tillbaka och läsa klart inlägget.
Däremot kan de länkar som ligger i sidebaren få flytta bloggbesökaren vidare till nästa sida, men det är naturligtvis upp till dig som bloggägare att bestämma.

Så - hur gör du nu detta då?

Kopiera länken du vill använda.
Gå till din bloggs Inlägg-Skrivläge där du har inlägget i vilket du vill lägga din länk.
Skriv de ord du vill ska leda till länken, t.ex.

Se hur du lägger in ett Label Cloud här,

och markera det ord/de ord du vill ska länka. Klicka på den lilla jordgloben med en kedja på uppe i redigeringsfältet. Då får du fram den här rutan:

Klistra in din länk här och klicka på OK.

Växla från Skriv till HTML-läge. Nu ser din länk ut så här:

Se hur du lägger in ett <a href="http://fixa-din.blogspot.com/2009/04/lagg-in-ett-label-cloud-for-dina.html">Label Cloud</a> här.

Att länken ser lite lustig ut är för att vi bara har markerat vissa ord i meningen. Om du har markerat en hel mening finns förstås alla ord inne i länken.

Nu ska vi lägga in koden för att öppna länken i ett nytt fönster. Den ser ut så här:

target="_blank"

Den ska ligga mellan webadressens sista "-tecken och före >-tecknet där du har din länks namn. Se bilden nedan.


Nu kan du växla till Skriv-läge och skriva klart ditt inlägg för att sedan publicera det. Din länk kommer nu att öppnas i ett nytt fönster då din besökare klickar på den.

Du kan använda samma kod för dina länkar i sidebaren, men då får du lägga dem i en html-gadget eftersom bloggers egna gadgets för länklistor, blogglistor etc inte har den redigeringsmöjligheten.

Du kan då använda följande kod:

<a href="http://din länks adress här"target="_blank">namn på din länk här</a>


Byt till den länkadress och det namn på länken du vill ha. Du kan klistra in hur många sådana här länkkoder du vill i samma html-gadget!