Skapa en personlig header - uppdaterat inlägg

Har du lust att testa något annorlunda på din blogg?
Varför inte lägga till en animation eller något annat skoj?


Med onlineprogrammet Fotoflexer kan du designa din egen header, lägga till foton, text och smileys eller andra animationer. Du kan göra fotokollage och lägga till ramar, stickers och annat roligt.

Jag laddade först upp en vit ruta med en ram runt för att jag skulle veta hur stor min header är, vilket utrymme jag hade att röra mig med, men det går lika bra att ladda upp ett foto och arbeta ovanpå det. Du kan ändra storlek och beskära bilden till lämpligt mått. 

Minimamallen har till exempel en header som är 660 pixlar bred i grundutförandet. Det kan vara ett bra utgångsmått.Har du en bredare wrapper i din blogg skapar du förstås en bredare bild.

När jag hade lagt upp min vita ruta gick jag till fliken för Layers och valde att ladda upp ett par .gif-bilder från min dator via Add Images-knappen. Som du ser är de animerade, alltså rörliga.

Sedan fortsatte jag på Decorate-fliken där jag lade till text och de färgade rutorna. Det finns massor du kan göra för att få en personlig header, bläddra runt och se vad du kan hitta.

Avsluta med att beskära din bild till din önskade storlek så att du inte råkat få någon del utanför din header. När du drar i markeringen för vad du vill ha kvar visas pixelmåtten, praktiskt!

Spara bilden på din dator och ladda sen upp den i ditt Picasa-album eller någon annanstans på nätet. Jag gillar uppladdningssidan Imgur, den är extremt enkel och lätthanterad, bara att dra bilden till webläsaren så laddas bilden upp.

Tyvärr går det inte att ladda upp rörliga gif-bilder direkt i din bloggs headergadget, vi måste in i kodmallen och lägga till bilden, men det är inte svårt. 

Lägg in din bild - Designmall

Designmallar

Om du har en av de nyare Designmallarna ska du använda den här koden.

Själva bildadressen och storlek ska du lägga in under .Header img-stycket.
Det kan se olika ut i de olika design-mallarna, men titta efter bilddelen (img = bild) i headerstycket.

.Header img, .Header #header-inner {
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);

background: url("http://bildadress.gif")no-repeat;

height: 200px;

width: 800px;

margin-left: auto;

margin-right: auto;

}

Klistra in den röda koden och byt ut höjden och vidden mot din bilds mått och klistra in din bildadress.

Om din blogg inte har något header img stycke alls eller något liknande kan du prova att klistra in hela stycket och förhandsgranska. Glöm inte att lägga till en bildadress först bara, annars kommer du inte att se någon headerbild.

Om du inte vill att din bloggs rubrik och ev beskrivning ska synas är det lätt fixat - utan att byta ut din rubrik till en punkt som många gör. Leta efter de här två styckena och byt ut nuvarande teckensnittstorlek till 0.

.Header h1 {
font: normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header .description {
font-size: 130%;
}

Förhandsgranska och spara när du är nöjd.


Lägg in din bild - Minimamallen

Minima

Om du i stället har en av de tidigare mallarna, främst då Minima är det den här koden du ska kika på.

#header-inner {

background: url("http://bildadress.gif")no-repeat;

height: 200px;

width: 800px;

background-position: center;
margin-left: auto;
margin-right: auto;
}

Klistra in den röda koden och byt ut höjden och vidden mot din bilds mått och klistra in din bildadress.

För att ta bort rubrik och ev beskrivning i Minimamallen ska du ändra nedanstående markerad kod till: font-size: 0px;

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

 Förhandsgranska och spara när du är nöjd!

Extra

Om du vill kan du låna min vita ruta med ram att jobba ovanpå. 
Klicka på den här länken, högerklicka på rutan och välj Spara som för att spara ner bilden till din dator. Just nu är rutan 660 pixlar bred och 250 pixlar hög vilket passar en standardMinimamall, men du kan ändra storleken till vad du vill i Fotoflexer. Dra bara i hörnet på rutan!
När du är klar med din header kan du skära bort den tunna ramen om du inte vill att den ska synas.


Lycka till!


Lämna gärna en kommentar med din blogglänk om du skapat en egen header i Fotoflexer så vi andra också kan se vad du gjort för fint! 

Har du problem?

Lämna din bloggadress och bildlänk här nedan i en kommentar så ordnar jag en fungerande kod åt dig.