Divider eli erotin gadgetien väliin

Multa pyydettiin koodia, joka toisi gadgetien väliin viivan, erottimen eli dividerin. Divider onkin tuttu tästä postauksesta. Mutta asiaan.

Ensimmäiseksi pitää tehdä mieleinen viiva/erotin jossain kuvankäsittelyohjelmassa. Viivan voi tehdä helposti muun muassa Paintissa. Sen jälkeen kuva pitää ladata esim. Photobucketiin. Siitä lisää tässä postauksessa. Jos käytätte Photobucketia, lukekaa se huolella, jotta koodi toimisi !!

Kun olet ladannut kuvan johonkin internetin kuvapalveluun, toimi näiden ohjeiden mukaan:

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Liitä kenttään alla oleva koodi:

.sidebar .widget {
background: url(www.kuvasikaunisosoite.fi);
background-repeat: no-repeat;
background-position: bottom center;
margin:0 0 40px;
padding-bottom: 40px;
}
 

Sulkujen sisään (punaiseksi värjätty teksti) tulee kuvasi osoite. Tämä on tärkeä kohta käyttäessänne Photobucketia, että kopioitte kuvan osoitteen oikeasta kohdasta! Siniset pikseliluvut ovat taas välejä, joita voitte tuttuun tapaan muokata mielenne mukaan.

Toivottavasti tästä oli apua! :-)

xoxo iltsu

Erotin postausten väliin

Tässä havainnollistava kuva erottimesta postausten välissä:

----

Olen kokenut erottimen hyväksi tavaksi erotella postaukset,

ja omasta mielestäni se on kiva yksityiskohta blogissa etenkin,

jos postauksia on paljon, ja marginaalit (tarkoitan, että

postaukset ovat liki kiinni toisissaan) ovat pienet.

JA MITEN SELLAISEN SAAT BLOGIISI?

1. Sinulla täytyy olla kuva, jonka haluat laittaa erottimeksi. Omani

olen ladannut laittomasti googlesta (hjuupsista...) hakusanalla

"dividers". Erottimen voit tehdä itse tai ladata jostain, mieluiten

luvallisesti, mutta muistakaa: Googlen kuvahausta

ladatut kuvat ovat aina laittomasti ladattuja, ellei

toisin mainita.

2. Seuraavaksi sinun tulee ladata kuvasi johonkin kuvapalveluun.

Tässä suosittelen lämpimästi Photobucketia. Se on helppo palvelu

aloittelijallekin *kokemusta on... :D

3. Kun olet ladannut kuvasi Photobucketiin tai johonkin muualle, mene

malli -> mukauta -> lisäasetukset -> lisää CSS.

Lisää alla oleva koodi sinne: 

.post{
background: url(tähän tulee kuvan osoite!!!!);
background-repeat: no-repeat;
background-position: bottom center;
margin:0 0 40px;
padding-bottom: 70px;
}

Sitten vain liität kuvan osoitteen sille tarkoitetulle paikalle 

& muokkaat välejä (punaiset numerot) mielesi mukaan, 

jotta silmäsi tykästyy.

xoxo, iltsu