Lägg till logo vid bloggrubriken

Vill du lägga till en liten logga/bild brevid din bloggrubrik utan att behöva skapa en helt ny headerbild? Kanske vill du ha kvar möjligheten att redigera bloggens rubrik i Malldesignern men vill ändå lägga till en liten bild som gör din blogg mer personlig.


Börja med att välja ut din bild. Du kan använda png, jpeg eller en animerad gif, vilket du vill.
Ladda sen upp din bild på valfri uppladdningssida. Själv föredrar jag Minus.com där man inte behöver registrera sig om man inte vill.

Spar fliken med din uppladdade bild och öppna sen din bloggs kodmall  i en annan flik.

Här ska du Kryssa i rutan för Utöka gränssnittskomponentmallar som står ovanför kodmallsrutan.

När du har gjort det ska du trycka på Ctrl och F på ditt tangentbord för att få fram en sökruta i webläsaren.
Beroende på vilken webläsare du använder hittar du sökrutan i över-eller underkant på fönstret.

I rutan fyller du i  <!--No header image -->  och trycker Enter på tangentbordet.
Då kommer du automatiskt till det här stycket i din kodmall. Det är här vi ska lägga till bilden/loggan.

 <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>

Om du vill ha din bild före rubriken lägger du in bildkoden före den rödmarkerade titel-taggen och om du vill ha bilden efter lägger du den efter det rödmarkerade. Det går utmärkt att lägga till bilder på båda sidor om rubriken också.

Den här bildkoden ska du använda om du bara vill lägga in din bild men inte behöver flytta runt den för att passa in den. Byt ut http://bildadress mot din bilds direktlänk.

<img src="http://bildadress" border="0" />

Om du när du förhandsgranskar märker att din bild hamnar lite tokigt kan du istället använda koden nedan och flytta runt bilden litegrann. Spara inte mallen mellan varje liten ändring du gör, välj Förhandsgranska under kodmallens ruta istället. Då slipper du gå tillbaka och börja om med att söka rätt plats i kodmallen om det inte stämmer direkt.
Beroende på vilken kodmall du har fungerar inte alla mått, det måste finnas plats inom "elementet" som rubriken ligger i för att du ska kunna flytta din bild men prova och se, förhoppningsvis hamnar din bild där du vill ha den.

<img src="http://bildadress" border="0" style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;" />

Så här ska det se ut i kodmallen när du lagt till din bildkod, antingen före, efter eller på båda sidor om <b:include name='title'>

<!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
       <h1 class='title'>
          <img src="http://bildadress" border="0" /><b:include name='title'/><img src="http://bildadress" border="0" />
        </h1>


Förhandsgranska och om du är nöjd sparar du!

Så här kan det se ut om man gillar kor ;-)

Undrar du vad bildens direktlänk betyder?
Det är den länk som inte har en massa konstiga tecken före eller efter sig, inga < eller [ alltså. När man klickar på länken ska bara bilden visa sig på en annars tom skärm. Det brukar för det mesta stå just Direktlänk eller Direct Link, välj det alternativet om det finns.
Är du osäker så klistra in din uppladdade bilds länk i en ny flik i webläsaren. Ser du enbart din bild och inget från någon websida så är det rätt. 

Du hittar direktlänken till din uppladdade bild längre ner på sidan om du använder Minus.com