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!
Jaa,detta kunde ja' :)
ReplyDeleteFast..Har ingen avdelare ;) Tack för att du "satt lite fart" här ♥...
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!
ReplyDeleteDe två linjerna ligger på olika ställen i din mall, så det är inget problem :-)
ReplyDeleteScrolla 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!
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! ;)
ReplyDeleteFö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...
ReplyDeleteVille 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 :)
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å!
ReplyDeleteHejsan!
ReplyDeleteTackar 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
Har du provat att öka siffran i padding-bottom?
ReplyDeleteJag får min bild mitt i texten :(
ReplyDeletehttp://yfrog.com/04felxfj
Vad gör jag för fel?
Tack för en grym sida föresten! Massa bra tips här :)
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?
ReplyDeleteYstran goes ...: Det har kanske löst sig, för när jag kollade såg jag inte ram. Jättesöt avdelare ;)
ReplyDeleteThis comment has been removed by the author.
ReplyDelete