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>

 

Hjälp dina besökare att länka till din blogg

Vill du hjälpa din besökare att enkelt länka till din blogg?
Med den här gadgeten kan de antingen kopiera koden och klistra in den i en html-gadget eller, om de själva har en Blogspot blogg, bara klicka på knappen. Du bestämmer själv vad du vill att det ska stå för text i din gadget.



Gör så här:

Börja med att ladda upp din bloggs bannerbild på Photobucket eller annan liknande sida så att den får en webadress.

Kopiera sedan koden nedan och klistra in den i en html-gadget i din bloggs layoutläge.

<p>Länka tillbaka till min blogg om du gillar den.<br/>
Visa min banner på din blogg</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="DinBlogglänk" title="DinBloggsNamn">
<img alt="DinBloggsNamn" style="border: 0px;" src="DinBannerlänk"/>
</a>
</div>
<textarea rows="3" cols="20">
<a href="DinBlogglänk" title="DinBloggsNamn" style="text-decoration:none;border:0;">
<img src="DinBannerlänk" alt="DinBloggsNamn" style="border:0" />
</a>
</textarea><br/>
<br/>

Eller, lägg till min banner på din Blogspotblogg med knappen nedan.

<form action="http://beta.blogger.com/add-widget" method="post">
<input style="display: none;" value="Gadgetrubrik" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
<a href="DinBlogglänk" title="DinBloggsNamn" style="text-decoration:none;border:0;">
<img src="DinBannerlänk" alt="DinBloggsNamn" style="border:0" />
</a>
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

Byt ut de röda orden DinBlogglänk mot din bloggs webadress.
De blå orden DinBloggsNamn mot din bloggs namn förstås och
de gröna orden DinBannerlänk mot din bilds/banners direktlänk.

Byt också ut ordet Gadgetrubrik mot det du vill att det ska stå i rubriken på den gadget som skapas på din besökares blogg, ovanför din banner.

Om du vill kan du byta ut min text också!

När du har sparat din gadget kan du prova att klicka på bloggerknappen för att se att/hur den fungerar. Genom att använda något av de här alternativen får din besökare din länkade bannerbild på sin blogg, men inte hela den här gadgeten. För det behövs hela koden som står här ovan.

Dekorera med egna foton- redigerat inlägg!

Jag insåg att jag kanske ska göra ett litet tillägg till föregående tutorial eftersom det ju faktiskt finns fler saker man kan göra med koden vi använde till animationerna.

Du kan också skapa ditt eget fotocollage och lägga in brevid din blogg, vill du kan du ha en rad med foton som löper ner längs bloggen. Med den här koden följer bilderna med upp då man scrollar, så alla syns.


Det du får tänka på är att eftersom foton är lite större än små animeringar måste du antagligen minska avståndet till kanten på webläsaren i koden, alltså minska siffran i right (eller om du byter ut ordet mot left)

Glöm inte att skriva rätt storlek på bilden i koden, i den gröna delen nedan.

<div id="tag" style="position:absolute; right:60px; top:60px; width:153px; height:122px;">
<a href="http://fixa-din.blogspot.com" target="_blank">
<img border="0" src="http://DinBildsDirektlänk"/>
</a></div>

Koden lägger du som tidigare i en HTML/Javascript-gadget.

Edit: Jag har lekt lite med koden och hittat ett sätt som gör att du kan bestämma exakt vart bilden ska ligga oavsett skärmstorlek.

Genom att använda den här koden istället kan du placera ditt bildcollage/din bild precis där du vill på högra sidan på din blogg. Även här kräver det att du testar lite olika sifferkombinationer för att hitta rätt placering, men om du har snabbredigeringen av gadgets aktiverad ( så du ser de där små verktygen vid gadgetarna då du är inloggad ) så gör du det enkelt från bloggens framsida och behöver inte gå omvägen via layout-läget.

<div id="tag" style="position:absolute; center:0px; top:60px; width:1580px; height:400px;">
<a href="http://fixa-din.blogspot.com" target="_blank">
<img border="0" src="http://DinBildsDirektlänk"/>
</a></div>

Flytta bilden till höger genom att öka den gröna siffran och till vänster genom att minska den. Du kan inte få bilden till vänster om bloggtexten med den här koden, men du kan justera som du vill på högersidan.
Glöm inte att ställa in rätt höjd på bilden i den blå delen av koden.
-------------------------------------

Tycker du att min bakgrund är fin i exempelbilden ovan?
Du kan hämta den hos Fixa-forumets duktiga designer Jakeline, den heter Dotted Halloween
Bilderna jag lagt in till höger är förstås inte med!

Dekorera din bloggmall med en animation

Sugen på att dekorera bloggen lite inför Halloween och jul?
Ett enkelt sätt är att lägga in en eller ett par bilder, gärna rörliga animationer - smileys, gifs och liknande - i en kod i en gadget i din bloggs layoutläge.

Gör så här:

Leta rätt på en eller flera bilder som du vill ha på bloggen.
Kopiera dem till din dator och lägg upp dem på Photobucket eller liknande så att de får en webadress. Länka inte bilden direkt från sidan där du hittar den, det kallas hotlinking och är väldigt illa sett på internet eftersom du då stjäl den websidans bandvidd.

Gå till din bloggs Layoutläge och lägg till en ny gadget, välj HTML/Javascript.

Klistra in den här koden:

<div id="tag" style="position:absolute; right:60px; top:60px; width:153px; height:122px;">
<a href="http://fixa-din.blogspot.com" target="_blank">
<img border="0" src="http://i38.photobucket.com/albums/e123/Buschiq/Bat1b3.gif"/>
</a></div>

Byt ut den röda webadressen mot din bilds direktlänk. Eller, om du vill ha kvar pumpan i exemplet, låt den vara. Det är en animerad bild med en fladdermus i pumpan.


Nästa steg är att ändra de gröna siffrorna till din bilds mått. Om du är osäker så håll musen över bilden du har sparad på din dator, då visas måtten.

De blå siffrorna indikerar vart bilden ska ligga på skärmen. De utgår, i det här fallet, från höger och toppen på sidan. Du kan byta ut de orden mot left och/eller bottom om du vill. Siffrorna talar om hur långt från webläsarens kant bilden ska ligga och här får du prova dig fram.

Tänk på att det finns ett flertal olika skärmstorlekar så alla kanske inte ser samma resultat som du, men någonstans ska ju bilden ligga. Testa dig fram till det du tycker passar!

Du kan lägga in flera bilder med varsin kod i samma gadget om du vill. Tänk dock på att de inte kan ligga på samma ställe, så du får anpassa koderna.

Visa en gadget bara på vissa sidor

Vet du om att du ganska enkelt kan ordna så att vissa av dina gadgets/sidelement bara syns på bloggens förstasida eller - om du föredrar det - bara syns då en besökare klickar klickar på ett inlägg eller på en länk i arkivet alternativt på etiketterna.

Kanske vill du göra en välkommen till min blogg-gadget och den behöver ju bara synas på förstasidan. Bloggens förstasida är alltså den sida man kommer till då man skriver din bloggs adress.


Det första du gör är att skapa din gadget. Ge den ett unikt namn/rubrik, t.ex. Välkommen.

Här har jag skapat en bildgadget i exempelbilden.


Spara din gadget.

Gå nu till din bloggs Layoutsida - Redigera HTML.
Kryssa i rutan för Utökade Gränssnittskomponentmallar, då syns hela din bloggs mall.


Klicka på CTRL och F på ditt tangentbord för att få fram en sökruta. Skriv i din gadgets namn i sökrutan och tryck på enter /ok beroende på webläsare. Du kommer nu till rätt plats i bloggmallen.



Under din gadgets titel ser koden ut ungefär så här:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image1' locked='false' title='Bild 1' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Du ska nu lägga till två kodrader. Den första ser ut så här om du vill visa gadgeten enbart på din förstasida:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

eller så här om du inte vill att den ska synas på förstasidan:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Den här koden ska ligga på raden under
<b:includable id='main'> - så här

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != ""'>

Välj den du vill ha.

Avslutningsvis ska du lägga till

</b:if>

och det ska ligga efter
<b:include name='quickedit'/> - så här

<b:include name='quickedit'/>
</b:if>
</b:includable>

Nu kan du spara din bloggmall.
Beroende på vilken kod du valt syns nu din gadget antingen enbart på bloggens förstasida eller bara på de andra sidorna.

Fallande snö

Hör du till dem som vill ha fallande snö på bloggen nu när vintern närmar sig?



Då kan du enkelt lägga till det genom att gå till din bloggs Layoutläge och skapa en HTML/Javascript-gadget. I gadgeten klistrar du in följande kod:

<script language="JavaScript" src="http://fixadinblogspot.com/Snow_Fall.js">
</script>

Spara!

Du kan ev behöva backa webläsaren en gång och sen uppdatera sidan om din blogg inte syns direkt. Det är inget som behöver upprepas i så fall, endast denna enda gång.

Bild som rubrik till gadgetar

Visst skulle det vara kul att kunna ha egna designade rubrik-bilder ovanför dina gadgets, att kunna anpassa dem efter vad innehållet är.

I det här inlägget börjar vi med det allra enklaste sättet, att lägga in en bildgadget ovanför inlägget du vill ha en rubrik-bild till.

Gör så här:

Skapa den rubrik-bild du vill ha, tänk på att inte göra den bredare än vad din sidokolumn är. I Minima-mallen är det 220 pixlar.

När du har sparat bilden går du till din bloggs Layoutläge och plockar fram gadgeten som du vill ha rubrik-bilden till. Plocka bort rubriken så det är tomt ovanför själva gadgeten.

Nu är det dags att ladda upp din bild.

Välj Lägg till en gadget, bildgadget.

Ladda upp din bild.

Nu är bilden på plats, men om du har Minima-mallen har du kanske en prickad linje mellan bilden och din gadget och det är ju inte så snyggt.

För att plocka bort den linjen går du in på din bloggs Layoutläge – Redigera HTML.

Här söker du dig ner till /* Sidebar Content

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Byt ut siffran 1 till 0 i border-bottom.

Spara mallen.

Nu är linjen borta, men det är långt emellan din bild-rubrik och gadgeten. Vill du minska det avståndet?

Det gör du också i din bloggs kodmall (redigera HTML), i samma stycke där vi plockade bort linjen.

Byt ut 1.5em i margin mot 0.3em. Du kan öka eller minska den här siffran efter behov.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Förhandsgranska din mall och se om avståndet känns bättre. Det här innebär att alla gadgets kommer närmre, vi kan inte anpassa avståndet mellan två enskilda gadgets.

Om du känner att några kommit för nära kan du skapa en html-gadget och i den rutan skriva <br> ett par gånger under varandra, så här:

<br>
<br>
<br>

Den lägger du mellan de gadgets som ligger för trångt. Anpassa antal taggar efter hur stort mellanrum du vill ha. Kanske räcker det med en radbrytning?

Nu känns det som om vi har skapat ett lagom avstånd mellan gadget och rubrik-bild.

Bild/linje mellan sidelementen i Sidebaren

Tidigare pratate vi om att lägga till en bild/linje mellan bloggposterna, men man kan också göra det mellan sidelementen i sidebaren.

Det första du får göra är att skapa eller leta fram en lämplig bild. Den ska inte vara bredare än din sidebar, vilket i Minimas grundmall är 220 pixlar.

När du har bilden klar laddar du upp den hos en webhost (t.ex. Photobucket) eller i ett inlägg på din blogg. Hur det går till kan du se här - det inlägget kommer dina besökare inte att kunna se eftersom det bara blir ett utkast.

När din bild är uppladdad är det dags att gå till din bloggs Layoutläge - Redigera HTML-kod.
Tryck på Ctrl + F på ditt tangentbord så får du upp en sökruta.
I sökrutan skriver du .sidebar .widget, Tryck enter.
Då kommer du direkt till rätt ställe i din kodmall.

Markera .sidebar .widget, och ta bort de orden. Vi ska ersätta dem strax.
I grundmallen stod sidebaren och mainbaren tillsammans, men vi vill ju kunna styra enbart sidebaren och därför ska den få en egen liten kod.


Klistra in följande kod under .main .widget-kodens stycke enligt bilden nedan:

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:30px 0 30px 0px;
padding:0 0 50px;
background-image: url(http://DinBild.png);
background-position: bottom;
background-repeat: no-repeat;
}

Nu kan du hämta din bilds direktlänk och ersätta http://DinBild.png med denna.

Förhandsgranska och se hur det ser ut - behöver du ändra något avstånd?

Anpassa paddings 50px efter din bilds höjd, lite mer än vad bilden är hög blir bra.

Du kan också öka eller minska avståndet uppåt och nedåt mot dina sidelement genom att öka eller minska margins 30px. Den första siffran är avståndet uppåt och den tredje (också 30px) är avståndet nedåt.
Om du behöver flytta bilden åt höger eller vänster (förutsatt att din bild är mindre än sidebaren så att det finns utrymme att flytta) är det siffra två och fyra du ska öka, de båda 0px alltså.

Spara när du är nöjd!

Låter det här virrigt? Läs mer om margin och padding här

Rullande bilder eller text

Rullande bilder och rullande text... Lite förvirrande är det...




Rullande bilder eller text på bloggen kan upplevas som både engagerande och rörigt, det beror på vad besökaren föredrar. En rullande textremsa under headern kan meddela något viktigt som bloggägaren inte vill att besökaren ska missa och rullande bilder i ett inlägg eller en gadget kan vara utrymmesbesparande. Men - kom ihåg att det inte uppskattas av alla!

Men, hur gör man då?

Börja med att bestämma vart du vill att dina bilder eller din text ska ligga.
I en gadget i sidebaren eller i ett blogginlägg?
Om du vill ha en text/bild i en lång gadget under din header men inte har en bloggmall med den valmöjligheten kan du kika här hur du lägger till en sådan gadget.

Om du vill använda en gadget - välj HTML/Javascript.
Om du vill lägga remsan i ett inlägg, välj Redigera HTML-läget.


Om du vill ha en rullande bildremsa, klistra in följande kod.

<div class="widget-content"><marquee direction="down"><center><a href="ADRESSEN_DU_VILL_LÄNKA_TILL"><img src="BILDENS_DIREKTLÄNK_HÄR" /></a><br><a href="ADRESSEN_DU_VILL_LÄNKA_TILL"><img src="BILDENS_DIREKTLÄNK_HÄR" /></a><br><a href="ADRESSEN_DU_VILL_LÄNKA_TILL"><img src="BILDENS_DIREKTLÄNK_HÄR" /></a><br><a href="ADRESSEN_DU_VILL_LÄNKA_TILL"><img src="BILDENS_DIREKTLÄNK_HÄR" /></a></center></marquee></div><div class="clear"></div>

Den här koden ger utrymme för fyra bilder. Om du vill ha fler bilder klistrar du in fler delar av den här koden:

<a href="ADRESSEN_DU_VILL_LÄNKA_TILL"><img src="BILDENS_DIREKTLÄNK_HÄR" /></a>

Den nya adresslänken ska ligga precis efter den sista likadana kodsnutten, var noga när du klistrar in den.

Du kan nu välja om du vill länka varje bild till en websida (kanske ett visst blogginlägg som handlar om bilden eller en annan blogg/websida) Det är inte nödvändigt att länka bilderna, du kan låta den här raden vara som den är.

Ser du att det på första raden i koden står direction="down"?
Du kan byta ut ordet down mot up, beroende på åt vilket håll du vill att bilderna ska rulla.


När du har laddat upp dina bilder hos den webhost du föredrar (t.ex. Photobucket) kopierar du den första direktlänken och klistrar in den på den första raden i koden där det står BILDENS_DIREKTLÄNK_HÄR. Fortsätt med nästa bilds direktlänk och så vidare tills du är klar. Du kan nu spara din gadget/ditt inlägg.


Om du tycker att det här verkar rörigt eller känner att bilderna rör sig för ryckigt (vilket jag kan känna personligen) så rekommenderar jag att du lägger in ett bildspel istället, hur du gör det kan du läsa här


Om du istället vill lägga in en rullande text ska du använda dig av följande kod i din gadget/ditt inlägg. Fortfarande är det HTML-läge/gadget som gäller.

<br /><br /><marquee>DIN_TEXT_HÄR</marquee><br /><br />

Byt ut DIN_TEXT_HÄR mot texten du vill ha!

Spara din gadget/ditt inlägg.

Lägg till ett bildspel

Om man har många bilder som man vill dela med sig av på bloggen kan ett bildspel vara lösningen. De flesta web-hosts (bilduppladdningssidor) har sina egna bildspel som du kan integrera i din blogg, välj efter din egen smak.

Här visar jag hur du kan lägga in ett bildspel med Picasa, din bloggs eget bildbibliotek där dina redan uppladdade bilder finns och så ett exempel från Photobucket som är den webhost jag oftast använder mig av själv.

Om du vill använda Picasa går du till ditt album, http://picasa.google.se/ klickar på Picasa Webalbum och loggar in med samma användarnamn och lösenord som du använder till din blogg. Picasa är en del av Google.





När du har loggat in kan du välja att ladda upp nya bilder eller att använda dig av dina befintliga bilder. Klicka på överför om du vill ladda upp nytt.



Om du vill skapa ett nytt album för just de bilder du ska ha i ditt bildspel väljer du skapa ett nytt album.
Namnge ditt album.

Nu får du ladda upp de bilder du vill ska ingå i bildspelet.

Ditt nya album finns nu bland de gamla.

Nu är det dags att lägga till bildspelet. Det finns två varianter, vi börjar med den lättaste.
Gå till din bloggs Layoutläge och klicka på lägg till gadget/sidelement.
Välj bildspel
Välj Picasa Webalbum och sedan Album.
Fyll i ditt användarnamn och välj vilket album du vill visa.

Om allt ser bra ut - spara!

Ibland kan det ta en stund innan ditt nya bildspel visas i den här listan och därför kommer jag att visa ett alternativt sätt, så var inte orolig om du inte ser ditt utvalda album.

Om du inte hittar ditt album i listan kan du gå tillbaka till ditt Picasa konto och klicka på ditt utvalda album. Till höger på websidan ser du då nedanstående text.
Klicka på Länka till det här albumet

Klicka på Bädda in bildspel
Välj hur stort du vill att ditt bildspel ska vara för att passa i din blogg och kopiera sedan html-koden.
Gå tillbaka till din bloggs Layoutläge och klicka på Lägg till gadget
Välj HTML/javascript


Klistra in din kod i rutan och spara.

Nu ska du kunna se ditt bildspel i din blogg.

Så går vi vidare till Photobucket. Personligen tycker jag att deras bildspel är roligare eftersom det finns ett antal olika utformningar att välja på.

Photobucket hittar du på http://photobucket.com/

Om du redan har ett konto loggar du in på det, annars kan du skapa ett genom att välja Join Now. Följ instruktionerna.


Ladda upp de bilder du vill ha i ditt bildspel genom att klicka på Choose files. Du kan också skapa ett särskilt album bara för bildspelet genom att välja Add a new album i den vänstra kolumnen men det är inte nödvändigt.

När bilderna är på plats klickar du på Slideshows och sedan på More styles.
Du får nu upp en sida där dina bilder finns till vänster (1.) och du väljer vilka du vill ha med i ditt bildspel genom att klicka på dem. De läggs då till i rutan nedertill på sidan och där kan du flytta runt dem till den ordning du vill ha och även lägga till en bildtext om du vill ha det.

Välj sedan vilken stil du vill ha på ditt bildspel i ruta 2 och även vilken storlek du vill ha.
Avsluta med att spara. (3.)

Namnge ditt bildspel.

Kopiera HTML-koden och klistra in den i din bloggs Layout enligt instruktionerna ovan i Picasa-exemplet där vi använde en HTML-gadget.

Spara och njut av ditt bildspel.