keskiviikko 26. maaliskuuta 2014

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

38 kommenttia:

  1. kiitos paljon tästä! :)
    osaisitko sanoa kun laitan ne erottimet, niin ne tulee myös tohon ylös välilehtien molemmille puolille, et saako ne jotenkin pois siitä?

    VastaaPoista
    Vastaukset
    1. Ei mitään! Voi ei, en tajunnutkaan, että se tulee myös ylävälilehtiin :o Yritin korjata ongelmaa, muttei blogger näytä mulle sivuja tällä hetkellä kunnolla, joten ongelman korjaaminen viivästyy - kurja juttu! Toivottavasti bloggerin mahdollinen bugi väistyy pian, jotta ongelma saadaan korjatuksi! (:

      Poista
    2. aa okei :) toivottavasti se toimii pian!

      Poista
    3. heii, ootko ehtiny yhtään kattoo tota? :)

      Poista
    4. itse asiassa joo, mutta mä en edelleenkään tajua, mistä saan sivut ylävälilehtiin XD pitääpi perehtyä tähän, on nimittäin ollut pitkän aikaa unholassa tää sun ongelma! hyvä, että sä muistutit mua tästä :) yritän tosiaan lähi aikoina ratkasta tän ongelman(:

      Poista
  2. Osaisitko neuvoa miten sais noi "kehykset" bannerin ympäriltä pois, katso blogistani?

    http://someone-special-life.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Tarkoitat varmaan valkoista blogipohjaa, joka on bannerin ympärillä valkoisena kehyksenä :-)? Olet ilmeisesti käyttänyt bannerin pyöristämiskoodia, ja pyöristänyt myös bannerin koodin kautta (?). Voit koittaa suurentaa bannerikuvaa vähän, mutta ehkä parempi vaihtoehto on lisätä alla olevat koodit mallin suunnittelutyökalun CSS:ään. Niiden lisäksi säätele mallin suunnittelutyökalussa blogin leveyttä sekä koodien lukuja, jotta ne ovat blogillesi sopivat :-)
      Toivotaan, että nuo auttavat!
      Ps. Jos saan rehellisen mielipiteeni ilmaista, pidän paljon tuosta, että valkoinen blogipohja kehystää banneriasi! (:

      .content-inner {
      margin-top: -50px;
      }

      .content-inner {
      padding-left: 1px;
      }

      .content-inner {
      padding-right: 1px;
      }

      Poista
    2. Kiva, jos tuosta oli apua! :-)

      Poista
  3. Voisitko tehdä postauksen että miten tuollasien bannerin saa tehtyä kuten linkittämässäni blogissa on? (http://karoliinaslittleblog.blogspot.fi/)
    haluaisin itse juuri samanlaisen bannerin, en vaan osaa tehdä sellaista :)

    VastaaPoista
    Vastaukset
    1. Mitä suurimmat pahoitteluni, että tämä sinun kommenttisi hukkui kommenttitulvaan ja jäi näkemättä! Oon tosi pahoillani :(
      Nyt mun ikävä kyllä tosi vaikea arvioida, onko tuo tällä hetkellä oleva banneri se, mistä halusit mallia vai onko ko. banneri jo vaihtunut pois.
      Anteeksi vielä hirveästi!!

      Poista
  4. Tiiätkö koodin, jolla saa blogin taustan pysymään paikoillaan, kun sivua rullaa alaspäin :o ? :)

    VastaaPoista
    Vastaukset
    1. Siihen ei tarvita koodia:) Menet vain mallin suunnittelutyökalu -> taustaväri -> lataat taustakuvan -> ruksitat kohdan "vieritä sivun mukana" pois :-) + tallennus!

      Poista
  5. Tää ei nyt liity tähän postaukseen mitenkään ,mutta muokkasin html:stä kuvien väliä pienemmäks, esikatselin sen ja tallensin sen jälkeen huomasin, että kaikki koodit mitä olin laittanut css:sään oli kadonnu, blogin ulkoasussa ei ollut tapahtunut mitään muutosta paitsi mobiiliversiossa joka oli normaali simple, ennen tätä se oli vastannut nykyistä ulkoasuani. Eli mitä pitäs tehdä? En uskalla laittaa mitään uutta koodia css:sään koska pelkään, että koodaamani ulkoasu katoaa ja joutuisin aloittamaan kaiken alusta. Voinko laittaa css:ään jonkun koodin ilman että blogi pamahtaisi takaisin normaaliksi simpleksi ? Kiitos jos autat.

    VastaaPoista
    Vastaukset
    1. Okei, en ole 100% varma tajusinko huolesi oikein, mutta yritetään kuitenkin :D

      Eli joo, jos olet kajonnut blogisi HTML-koodiin ja tehnyt siellä muutoksia, hyvinhyvin suurella todennäköisyydellä mallin suunnittelutyökalun CSS-osioon laitetut koodit ovat hävinneet kentästä tuhka tuuleen eikä uudet, HTML-koodiin kajoamisen jälkeen CSS:ään laitetut koodit enää välttämättä toimi. Ongelmasi on yleinen, ja hyvin ikävä, sillä mulla ei ole kauhean montaa niksiä ongelman ratkaisemiseen ;(

      (ikävin mutta toimivin ratkaisu) MALLIN KOKONAINEN UUSINTA
      - Koska siis olet muokannut blogisi HTML-koodia, CSS:ään syötetyt koodit ei enää toimi ja aiemmat sinne laitetut koodit ovat hävinneet. Suosittelen erityisen lämpimästi aloittamaan mallin suunnittelun ihan alusta valitsemalla uuden / aiemman mallin, jolloin edellisen HTML-koodi nollautuu -> tällöin CSS:ää pitäisi pystyä muokkaamaan ihan vaivattomasti, ja koodit myös varmasti toimivat. Täten tosin joudut lisäämään kaikki tekemäsi muokkaukset uuedstaan... Tiedän, että tämä on todella tylsä ja ärsyttävä ja kamaala ratkaisu, mutta mulla on tästä kokemusta ja on toiminut erinomaisesti! Siksi suosittelen tätä, jos sulta löytyy intoa ja aikaa.

      Muita toimivia niksejä multa ei taida löytyä ;( (jos lisäämäsi koodi HTML:ään on ollut virheellinen, voit yrittää etsiä koodia HTML:stä ja poistaa sen -> saattaa auttaa mutten takaa mitään enkä itse välttämättä suosittele)

      Suosittelen, että laitat jatkossa kaikki koodit CSS:ään, jotka käyvät sinne, jotta vältytään tälläisiltä jutuilta :( CSS ei tosin hyväksy lähellekään kaikkia koodeja.. Ja jos muokkaat blogiasi HTML:n kautta, kannattaa varmistaa, että laitat koodin oikeaan paikkaan ja oikeassa muodossa, ja kuten oletkin tehnyt, kannattaa malli AINA esikatsella ennen tallentamista :)

      Poista
    2. Kiitos:) Taidan varmaan tehdä koko ulkoasun uusiksi ja yritän olla koskematta html:ään jatkossa

      Poista
  6. Munkaan juttu ei liity kyseisen postauksen aiheesen. Kyselisin vaan, että miten saisin säädettyä blogin leveyksiä niin, että postauksien tekstit siirtyy mukana? Kuvat ja banneri siirtyy samassa suhteessa, mut teksti jää ikävästi sinne oikealle puolelle keikkumaan.. ja saanko myös siirrettyä helposti gadgetit takaisin sivulle? Kiitos! :-)
    http://annikalivesindreams.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Hei, tosi isot pahoittelut, että vastaan vasta nyt!

      Gadgettien siirtäminen takaisin sivulle on tosi helppoa; malli -> mukauta (eli mallin suunnittelutyökaluun) -> ulkoasu -> blogin asettelu. Sieltä sitten valitset mieleisen asettelutavan. Kun olet sen valinnut, muista tallentaa. Gadgettien järjestystä voit muokkailla Ulkoasussa.

      Tuosta tekstin paikoilleen jäämisestä... Ainakin sen pitäisi liikkua muun blogin kanssa, kun on muuttelemassa leveyksiä, ja minusta näyttää, että omassa blogissasi teksti on juuri niin kuin pitääkin :) Saattaa myös olla, että ymmärsin ongelmasi väärin, joten jos jäi kysyttävää, kysy ihmeessä lisää!

      Jos kuitenkin haluat liikuttaa tekstiä, käytä tätä koodia ja muokkaa pikselukua:
      .post-body {
      margin-left: 40px;
      }

      Poista
  7. Hei! Tietäisitkö miten poistan mallissa valmiina tulleen 'erottajan' postauksien välistä? sun blogissasi ei enää sellaista ole:) Mallina mulla on Simple/yksinkertainen, ja siis puhun siitä viivasta mikä tulee 'Lähettänyt Laura klo 02:03 2 kommenttia: ' alle? Kiitos jos kerkeät vastata mahd. äkkiä!:)
    (tätä en siis ole itse laittanut!)

    VastaaPoista
    Vastaukset
    1. Hei Laura!
      Hienoa, että kuvailit ongelmasi noin hyvin! Jos täysin oikein ymmärsin, se pitäisi saada pois käyttämällä pelkkää mallin suunnittelutyökalua :-)
      Malli -> Mukauta -> Lisäasetukset -> Tekstin alatunniste -> Varjon väri (tai joku niistä muista vaihtoehdoista :D)
      Toivottavasti tästä oli apua! Ja pahoittelut vielä siitä, että vastaan näin paljon myöhässä!

      Poista
  8. Voitko tehdä selaisen postauksen, jossa näytät miten teet varjostuksen tekstin otsikkoon?

    VastaaPoista
    Vastaukset
    1. Varjostukset tekstin otsikkoon? Juu, kyllä mä voin tehdä :-) Kiitti vinkistä!

      Poista
  9. Voitko tehdä sellasen postauksen, jossa neuvot miten saan linkeistä pois alleviivauksen? :) Siis kun vie hiiren linkin päälle, niin siihen tulee automaattisesti alleviivaus, kuinka saisi pois?

    VastaaPoista
    Vastaukset
    1. Joo, kyllähän mä voin sellasta toteutella. Toivoisin vaan linkkiä sellaseen blogiin, jossa sellanen on, jotta osaisin tehdä soveltuvan koodin :-)

      Poista
  10. http://precpics.blogspot.fi <--- tuota olen yrittänyt hakea..eli miten saan gadgetien otsikot eri värisiksi ja pelkän viivan tekstin ja sivupalkkien väliin? Oon todella kiitollinen jos pystyt auttamaan koska olen itse niin huono näissä ja haluan niiiin kovasti parantaa blogiani, myös kun kyse on ulkoasusta. Ja otin tuon blogin vaan esimerkkinä kun löysin sen ohimennen. Niin kiitos näin etukäteen :)

    Tässä vielä blogini: http://piasundell.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Viivan saa helposti mallin suunnittelutyökalusta mitään koodeja tarvitsematta: menet vain mallin suunnittelutyökaluun -> Lisäasetukset -> Aksentit, ja sieltä sitten vain katselet sopivia värivaihtoehtoja.
      Gadgetien otsikkojen eriväriseksi saaminen onkin jo isompi ongelma. Malliblogissa gadgetien otsikoiden teksti on sama kaikissa gadgetien otsikoissa?
      Jos siis haluat jokaisen gadgetin otsikon eriväriseksi, sun pitää tietää jokaisen blogisi gadgetin ja sen otsikon koodi = complicated.
      Mutta jos haluat gadgetien otsikoille värit (ja taustavärit) liitä blogiisi tää koodi (siis että kaikki gadgetien otsikot on samanlaisia):

      h2 {
      color: white;
      background: black;
      }

      Poista
    2. KORJAUKSIA:
      "Malliblogissa gadgetien otsikoiden teksti on samanvärinen kaikissa gadgetien otsikoissa?"
      "(siis että kaikki gadgetien otsikot on väriltään samanlaisia)"

      Poista
  11. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
  12. Miten saan ton erottajan oikeisiin kohtiin? :)
    http://kaislajaluna.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi Kaisla! Sullakin taitaa olla tän koodin kanssa sellainen ongelma, että erottimet tulee myös ylävälilehtiin? Tätä koodia tehdessäni mulla ei ollut käytössäni ylävälilehdet, joten ikävä kyllä se seikka jäi huomaamatta :/ Kehittelen tässä joku päivä (jos muistan :-D) jotain korvaavaa koodia! :) Tai ainakin yritän.

      Poista
    2. Kommentoin nyt tähän postaukseen, mutta osaisitko kertoo kun vaihoin noi sivut tonne sivupalkkiin, nii miten ne saa allekkain kun ne on nyt tollein tyhmästi rinnakkain? :)

      Poista
    3. ainii ja tossa linkki: http://kaislajaluna.blogspot.fi/ :)

      Poista
    4. Moi taas :-)! Sivujen käyttäytyminen blogissasi olevalla tavalla johtuu siitä, ettet ole poistanut blogistasi sivujen keskittämiskoodia. Kun poistat sen, sivujet järjestäytyvät allekkain :)

      Poista
  13. Ei kuulu tähän postaukseen, mutten löytänyt mistään muualta mun onglemaan sopivaa postausta niin ajattelin tulla uusimpaan kysymään!
    Eli mun blogi (kadettaikinaan.blogspot.fi) postauksien tekstin on kursovoitu, vaikka en itse sitä laita ole laittanut kirjoittaessani postauksta. CSS koodeissa ei näyttäisi olevan mitään vikaa. Mikä kursovoi ne ja miten saan sen pois? En halua gabgettejen kursovoinsia pois, vaan postauksien tekstejen.

    VastaaPoista
    Vastaukset
    1. Olet näköjään saanut ongelman pois - hyvää työtä!

      Poista
  14. Moi! Olen parisen tuntia koittanut itsekseni netistä etsiä tietoa, mutta nyt taidan luovuttaa ja kysyä apua! Haluaisin tietää, miten saan sellaisen viivan/jakajan postauksen ja sivupalkkini väliin? Esimerkiksi tässä blogissa http://www.pinkbubble.fi/ löytyy samanlainen harmaa viiva.

    VastaaPoista
    Vastaukset
    1. Moi! Hienoa kuitenkin, että olet ollut itsekin ahkera:)! Tuollaisen aksentin saa Malli > Mukauta > Lisäasetukset > Aksentit ja sieltä valitset vain värin :)

      Poista
  15. Hei saanko kysyä että miten saisin viivan, tohon välilehtien alapuolelle? Ja sitten vielä toinen kysymys: Oon ihmetellyt kun ihmisillä on tämä sivu välilehdellä, ja kun vetää hiiren sen kohdalle, ilmestyy sen alle "alasivuja", tai siis jonkin lainen lista? Toivottavasti tajusit :) En tiiä tiedätkö tähän vastausta tai onko se liian monimutkainen... Toivottavasti vastaat :)

    VastaaPoista

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