Header Ads

Skapa en personlig header - uppdaterat inlägg

Photobucket

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.

20 comments:

  1. Jag har länge letat efter löv som faller att ha nu på hösten men hittar inte. Var har du ittat dina?

    Anna

    ReplyDelete
  2. Här - du kan använda samma som jag gör om du vill.
    http://img215.imageshack.us/img215/5275/fallrequestleavesautumn.gif

    ReplyDelete
  3. Använder mig av alla möjliga tips som denna sida har att ge för att modifiera min blogg.
    Ett stort tack ska ni ha ^^

    Uppdaterar den hela tiden, besök gärna
    http://vaelrostade-haestkastanjer.blogspot.com/


    Mvh,
    Westman

    ReplyDelete
  4. Har precis lagt upp en ny header med lite animationer på - funger dock inte! Alltså detaljerna finns där, men dom ska glittra och det gör dom inte. Vad har jag gjort för fel!?

    ReplyDelete
  5. hur centrerar man sin egna header bild?

    ReplyDelete
  6. Jag fick inte animationen att fungera. Vet du vad det kan bero på?
    http://agentasklass.blogspot.com/

    ReplyDelete
  7. kan man göra en header i blogspot med klickbar meny? ex arkiv, om mig, kontakt?
    mvh Lina

    ReplyDelete
  8. den blir inte animerad när jag lägger in den :(

    ReplyDelete
  9. Detta ska jag testa!

    Kakburken köpte jag faktiskt på Åhlens. Den är ljusblå o inte vit som den ser ut på bilden!

    ReplyDelete
  10. Usch!! Jag vill byta min header, men kommer inte ihåg als hur jag skall göra. Var inne och kollade, men det ser inte ut alls som här ovan. Vad gör jag??

    ReplyDelete
  11. jag får det inte att funka alls... gick in på fotoflexer och laddade upp en vit bild, men så fort jag laddar upp en bild på den så tar den öcer och storleken ändras... testade med deras egna kollage-figurer men de är för små för att användas som header, förstorar man den så blir bilderna istället suddiga... är egentligen ute efter ett kollage men lyckas inte... hur göra????

    ReplyDelete
  12. Anki - jag får kika på det där, kanske har Fotoflexer hunnit ändra på sina funktioner.

    ReplyDelete
  13. Hej går det att ändra hur snabbt animationerna ska röra sig? för även om jag har valt långsamt när jag gjorde animatinonen så blir den snabb när jag lägger in den..

    ReplyDelete
  14. Hej, jag har använt mig av dina fantastiska tips här. Jag har fixat både min header och info.delen på fotoflexer. Otroligt smidigt. Tog ett tag att få till de rätta måtten på malen. Men det gick tillslut. Använder även fotoflexer för alla mina bilder collagen är toppen. mochama-ma.blogspot.com/

    ReplyDelete
  15. Har letat i evigheter nu hur man ska göra för att centrera bilderna i inlägget men hittar ingenting, snälla hjäääälp!! :)

    ReplyDelete
  16. Elin - det gör du medan du skriver ditt blogginlägg. Klicka på bilden så den blir blåmarkerd och välj sen att centrera den.

    ReplyDelete
  17. Jag vill inte lägga upp någon bild, men jag vill lägga till en personlig text som en slags underrubrik till mitt bloggnamn i min header. Hur gör jag?

    ReplyDelete
  18. Jenny - under Inställningar - Basfunktioner hittar du rubrik och beskrivning, där kan du fylla i din beskrivning.

    Alternativt kan du lägga till en textgadget under rubriken om du vill, ovanför gadgeten med blogginläggen. Det gör du på Layoutsidan.

    ReplyDelete
  19. Hej. Jag kan inte förstå hur jag byter Header.
    www.loppisloppan i farten

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