Header Ads

Separera dina bloggposter med en bild/linje



Vill du ha en bild/en linje som separerar dina bloggposter?
Något snyggt/gulligt som återkommer efter varje bloggpost?

Då kan du lägga in en enkel kod i din kodmall. Så här gör du:

Börja med att välja ut en bild du gillar. Skapa själv eller leta på nätet efter en bild som inte är upphovsrättsskyddad.


Gå till din bloggs kodmall, Layoutläget, Redigera HTML-kod.
Scrolla ner till Post-stycket, Post-footer.
Vill du kan du ta hjälp av Ctrl+f, skriv in post-footer i sökrutan, men det går bra att söka manuellt också.

Här ska du byta ut raden margin: .75em 0; till nedanstående kod. Ev kan du ha andra siffror efter ordet margin, men det spelar ingen roll.

background: url(http://DIN BILDS ADRESS);
background-repeat: no-repeat;
background-position: bottom center;
margin:50px 0px 40px 0px;
padding-bottom:90px;


Ladda upp din bild hos en webhost, t.ex Photobucket.
Kopiera bildens direktlänk.


Klistra in länken i kodstycket du la in i din bloggmall, där det står http://DIN BILDADRESS
Justera den nedersta siffran i din kod ( padding-bottom: 90px; ) efter hur hög din bild är.
Ex. är din bild 50 pixlar hög, skriv 50px;

Förhandsgranska din bloggmall.
Om din bild ligger där den ska och ser bra ut, spara!

Nu kan det ev. vara dags att börja justera avstånden mellan bloggposten och din bild.
Om du vill få större avstånd mellan din bild och postens kommentarsrad, öka pixelantalet för din bildstorlek, alltså padding-bottom: 90px; till lämpligt antal pixlar. Prova dig fram.
Om du vill minska avståndet minskar du förstås antalet pixlar istället.

Om du däremot vill ändra avståndet mellan bilden och nedanstående blogginlägg är det den tredje siffran i koden margin: 50px 0px 40px 0px; du ska ändra. Alltså öka eller minska siffran 40.

Om du vill flytta bilden sidledes är det någon av de två 0px du ska använda. Den första nollan är marginalen till höger, den andra nollan är marginalen till vänster. Prova dig fram tills du är nöjd.

Spara när du har bilden där du vill!

14 comments:

  1. Jaa,detta kunde ja' :)
    Fast..Har ingen avdelare ;) Tack för att du "satt lite fart" här ♥...

    ReplyDelete
  2. Jag har en liten fråga - som det ser ut nu har jag redan en rad avbrytning för inläggen... jag vill att den i sidebaren ska finnas kvar men att den där inläggen visas ska tas bort eftersom jag nu lagt in en dividerbild - ser lite dubbelt ut som jag har nu med två! :) Tack på förhand!

    ReplyDelete
  3. De två linjerna ligger på olika ställen i din mall, så det är inget problem :-)

    Scrolla ner till stycket som börjar med /* Posts
    Strax under det hittar du en rad som heter border-bottom: 1px dotted. Byt ut 1px mot 0px så försvinner din linje, men du har så du kan lägga in den igen om du ångrar dig.

    Lycka till!

    ReplyDelete
  4. Tack! Du är en ängel! Jag blev så glad när jag hittade den här bloggen och satt hela kvällen igår och rumsterade om - rätt stor skillnad från förut och all tips och hjälp kommer härifrån! Tack för att du tar dig tid och hjälper oss okunniga html-amatörer! ;)

    ReplyDelete
  5. Förresten, jag har funderat lite på en annan sak och inte funnit det här... jag skulle vilja dela av blogginlägg och sidebar lite bättre, nu är bakgrunden helt vit. Finns det någon divider man kan lägga in där eller kanske lägga in en ljus bakgrundsfärg bara för sidebaren? Eftersom jag använder mig av en html bakgrund från Shabby bloggs så verkar det inte gå att ändra bakgrundsfärg varken där inläggen är eller sidebaren...

    Ville oxå ha tre kolumner och gjorde enligt din beskrivning, det funkade jättebra men det blev lite rörigt då jag inte har någon slags avdelare mellan inlägg och sidebars.. dessutom testade jag då med shabby blogs bakgrund för tre kolumner men den passade inte till minima och de inställningar jag fått från dina instruktioner, kan man justera detta på något sätt.

    Oj det blev ett långt inlägg med många frågor, men hoppas ändå på att få svar!

    tack på förhand!

    Em :)

    ReplyDelete
  6. Emmeli: Börja med att kika i slutet på det här inlägget. Där står det hur du lägger till en (färgad) bakgrund till din mainbar och sidebarwrapper.
    http://fixa-din.blogspot.com/2009/04/hur-du-lagger-till-en-egen-bakgrund.html

    Du lägger enkelt till en ram runt varje wrapper genom att lägga till koden:
    border:1px solid #000000; (byt ut färgkoden)

    Ang din bloggmalls bredd kan du öppna bildlänken i koden du lagt in i ett nytt webfönster och sen kopiera hem den.

    Klipp den mitt itu och öka bredden på det vita.

    Spara som jpeg och ladda upp på t.ex. fileden.com eller 4shared. (photobucket tar inte så breda bilder)

    Kopiera din nya bilds direktlänk och byt ut den gamla bildlänken i gadgeten mot din nya. Spara.

    Har du frågor får du återkomma!

    ReplyDelete
  7. Tack, jag ska pilla lite med det när jag kommer hem idag! Så får vi se hur det går!! Du är ju kanon på att svara snabbt alltså!

    ReplyDelete
  8. Hejsan!

    Tackar för ett super bra blogg med KANON tips!
    Men jag skulle göra som det står överst här, jag fann en underbar avdelar och har fått in den MEN nu ser avdelaren ut att ligga o trycka på texten "kommentarer o det" hur får jag avstånd mellan avdelaren och mina kommentarer? Måste jag flytta på kommentarera till övers på inläggen?

    Vänliga Kramar Erika

    ReplyDelete
  9. Har du provat att öka siffran i padding-bottom?

    ReplyDelete
  10. ¨Hur gör man för att istället dela av blogg inläggen? Jag vill inte ha som en löpande text utan en färgad bakgrund bakom varje in lägg med rundade kanter med svart border. Har försökt få till det med lyckas inte.

    tex som denna bloggen
    http://rebeccaas.blogg.se/

    Min blogg
    stylebybusu.blogspot.com/

    ReplyDelete
  11. Jag får min bild mitt i texten :(
    http://yfrog.com/04felxfj
    Vad gör jag för fel?

    Tack för en grym sida föresten! Massa bra tips här :)

    ReplyDelete
  12. Jag fick en ful svart ruta runt min bloggpost separerare, hur får jag bort den? Går det att ta bort i kodmallen eller stilmallen eller måste jag ha en bildredigerare och göra bakgrunden transparent?

    ReplyDelete
  13. Ystran goes ...: Det har kanske löst sig, för när jag kollade såg jag inte ram. Jättesöt avdelare ;)

    ReplyDelete
  14. This comment has been removed by the author.

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