perjantai 11. lokakuuta 2013

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

20 kommenttia:

  1. mikä niistä on se kuvan osoite ku en löytänyt oikeaa? :O

    VastaaPoista
    Vastaukset
    1. Direct-kohta. Täällä tarkemmat ohjeet;
      http://blogikoodeja.blogspot.fi/2013/10/vahan-photobucketista.html?m=0

      Poista
  2. Vastaukset
    1. Lähdetäänpä liikkeelle ihan alusta. Sinulla on kuva, jonka haluat divideriksi eli erottimeksi. Mistä olet kuvan ladannut vai oletko tehnyt sen itse?
      Seuraavana on vuorossa kuvan lataus. Mihinhän nettipalveluun omasi latasit? Photobucketin olen itse kokenut hyvin toimivaksi enkä taida olla kokeillut käyttää dividerin laittamisessa muuta palvelua. PB:tä suosittelen siis lämpimästi!
      Kun olet ladannut kuvan nettipalveluun, on vuorossa kuvan linkin kopioiminen. Mistä sen kopioit? Et kai osoitekentässä (kenttä, joka on selaimen vasemmassa yläreunassa palkkina, jossa on sivun www-osoite)? Tämä EI TUOTA toimivaa lopputulosta, jolloin myöskään divider ei näy. Jos latasit kuvan Photobucketiin etkä tiedä, mistä kuvan osoite pitää kaapata, luepa tämä postaus kokonaan: http://blogikoodeja.blogspot.fi/2013/10/vahan-photobucketista.html?m=0

      Ajatellaan, että aiemmat kohdat ovat menneet loistavasti osaltasi, eikä niissä ole ollut ongelmakohtia. Seuraavana olet kopioinut postauksen koodin mallin suunnittelutyökalun CSS:ään, eikö vain? Tarkista aina ensimmäiseksi, jos koodi ei toimi, oletko kopioinut KOKO KOODIN alusta loppuun. Tämä on merkittävä osa koodausta, ja useat virheet käyvät itse asiassa tässä kohdassa.
      Kun liität kuvan osoitteen sille tarkoitettuun osaan koodista, tarkista, ettet ole poistanut mitään sulkeita tms.

      Jos olet lukenut nämä vinkit eikä koodi toimi vieläkään, ilmoitathan, ja yritä kertoa mahdollisimman selvästi ongelmastasi, esimerkiksi missä kohtaa epäilet virheen käyneen tms. ja mitä kaikkea olet tehnyt. Toivotaan, että ongelma korjaantuu ja saat dividerin paikalleen! :)

      Poista
  3. Tästä oli tosipaljon apua! Koodi toimi hyvin, vaikka malli ei olekkaan simple. Katoin jonkun toisen blogista saman ohjeen, tässä mielestäni oli selvemmät ohjeet. kiitos!!

    VastaaPoista
    Vastaukset
    1. Kiitos Suvi! Ja hienoa kuulla myös, että koodi toimi, vaikkei malli ollutkaan Simple :)! Oi etta, kiitosta vielä!

      Poista
  4. Toimiikohan imguriin ladatut kuvat?

    VastaaPoista
    Vastaukset
    1. Jaa, en ole kokeillut, mutta kokeile ihmeessä :D

      Poista
  5. moi! latasin kuvan photobucketiin ja oon nyt yrittänyt laittaa tuohon koodiin kuvan osoitteeksi jokaista (direct, html, img), mutta erotinviiva ei vaan yksinkertaisesti ilmesty blogiin? koodi on kokonaisuudessaan lisää css -boksissa, joten en vaan enää yhtään keksi, miksi en saa tätä toimimaan:(

    VastaaPoista
    Vastaukset
    1. Moi ano :-)! Hyvä, että oot kopsannut kuvan tuosta direct-kohdasta, sillä niin se kuuluisikin tehdä :)! Mun on kuitenkin aika vaikeeta sanoa, miksei koodi toimi blogissasi, kun et blogiasi linkannut.
      Mutta toimiikos blogissasi mikään koodi CSS:n kautta lisättynä? Se saattais olla syy tähän ongelmaan. Ensiavuksi suosittelen, että koitat lisätä tämän postauksen koodin uudestaan, jotta se olis ainakin kopioitu kokonaan. Ethän oo vahingossa poistanut esim. joitain kaksoispisteitä koodista? Sekin voi olla syy, miksei koodi toimi.

      Poista
  6. Mullakaan tää ei toimi vaikka tein kaiken tosi tarkasti ^ ja tuostakin kävin vielä vinkit läpi. Voikohan mulla olla blogissa kenties joku joka estää koodien lisäämisen, koska oon tänään yrittänyt html-osioonkin saada related post-widgettiä, mutta ei kertakaikkiaan onnistu. Oisko sulla jotain vinkkiä?

    http://katja-dontdreamlive.blogspot.fi/ tuossa vielä linkki mun blogiin

    VastaaPoista
    Vastaukset
    1. Moi taas! Joo, voi olla, että sun blogisi ei nyt just hyväksy koodeja. Voi olla niin, että olet lisännyt CSS:ään sellaisia koodeja, jotka eivät ole oikeassa muodossa eli eivät toimi. Suosittelen sua siis nyt ekaksi menemään mallin suunnittelutyökalun CSS-osuuteen, kopsaamaan sieltä kaikki koodit ja sitten deletoimaan ne. Sitten kokeile lisätä CSS-boksiin jokin koodi ja kokeile, toimiiko. Jos toimii, sulla oli jokin virhe siellä CSS-koodeissa, minkä takia mikään koodi ei toiminut. Ja jos ei toimi, otathan yhteyttä niin koitetaan ratkasta sun ongelmasi :-)

      Poista
  7. Moi! :) Mulla onnistuu kaikki ton laittamisessa, paitsi kun alan säätää sen erotinviivan kohtaa, niin sitten kun se on hyvässä kohdassa, niin sitten edellisen postauksen ja sen erotinviivan väliin jää iso väli? :o

    VastaaPoista
    Vastaukset
    1. Moi Henna! Sulla on varmaan liikaa tyhjää tilaa Divider-kuvassasi sen varsinaisen dividerin ylä- ja alapuolella. Suosittelen siis rajaamaan kuvan siten, että sen ylä- ja alapuolelle jää mahdollisimman vähän tyhjää tilaa.

      Poista
  8. Moi! Mulla tää näkyy gadgettien välissä/päällä, eikä postauksen jälkeen. http://janinajakarvakamut.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Heips! Onhan sulla varmasti käytössä oikea koodi? (blogisi käyttöä on rajoitettu, joten en pääse katsomaan.)

      Poista
  9. Hei! Miten välilehtien alla olevan viivan saa pois? http://dreamcastlebyninja.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi!
      http://blogikoodeja.blogspot.fi/2014/09/valilehtien-taustavari-muut-harpakkeet.html

      Poista
  10. Hellou, mistäköhän johtuu, että saan erottimen laitettua blogiin ja tallennettua. Jonkin aikaa kaikki siis hyvin ja erotin pysyy paikallaan, mutta sitten se yhtäkkiä vain katoaa ja tilalle jää vain tyhjää..?

    blogi: http://suolastajamakeaa.blogspot.fi

    VastaaPoista
  11. Hei!
    Minulla koodi toimi oikein hyvin, kun poistin " margin:0 0 40px; " tuosta kohdasta nuo nollat pois:)
    http://tahdetonluettuja.blogspot.fi/

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)