tiistai 9. kesäkuuta 2015

Sivut/välilehdet banneriin

*Postauksessa oletetaan, että olet lisännyt blogiisi ylävälilehdet eli sivut bannerin alle

Tähän ei tarvita HTML-koodin muokkausta, vaan homma hoituu näppärästi tutun ja turvallisen CSS:n avulla. Eli välilehdillä bannerissa tarkoitan tätä:


MITEN OMAAN BLOGIIN?

1. Tee bannerikuva, eli siis banneri, johon haluat "linkkipalkin" eli välilehdet. Minä tein esimerkkibanneriin valkoisen suorakulmion eli palkin, johon halusin laittaa välilehdet. Tältä tässä vaiheessa bannerini näytti:


2. Lisää banneri blogiisi. Jos et osaa lisätä banneria, lue tämä postaus.

3. Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit (violetilla):

.PageList {text-align:center !important;}
.PageList {text-shadow: 0px 0px 3px black  !important;}
.PageList {letter-spacing: 2px; !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList {margin-top: -347px !important;}
.PageList {margin-right: 70px !important;}
.PageList {text-transform: uppercase; !important;}

Jos haluat välilehtien tekstien taakse varjostukset, pidä koodin toisella rivillä oleva 3 ja black (voit muuttaa sen väriä esim. pink, grey, blue...) paikoillaan. Jos et halua varjostuksia, poista koko toinen rivi (.PageList {text-shadow: 0px 0px 3px black  !important;}) koodista. 
Tässä kuvat, miltä teksti näyttää ilman varjostuksia ja varjostuksilla:


(// pahoittelut, kuvat ovat jostain syystä erittäin epäselviä)

Kolmas rivi (.PageList {letter-spacing: 2px; !important;}) tarkoittaa letter-spacingia eli k i r j a i n t e n   v ä l i ä  toisistaan. Jos et halua väliä, laita numeron 2 paikalle numero 0. Jos haluat välin, voit katsoa, minkä numeron välistä tykkäät eniten. Kokeile esim. lukuja 1-5.

Neljäs rivi (.PageList {margin-top: -347px !important;}) kertoo välilehtien korkeuden eli sen, miten ylhäällä ne ovat blogissa, mille korkeudelle ne bannerissasi sijoittuvat. Voit muuttaa lukua -347 mieleiseksesi.

Viides rivi (.PageList {margin-right: 70px !important;}) kertoo sen, missä suhteessa välilehdet ovat reunoihin verrattuna, mutta samalla rivillä. Esim. ovatko välilehdet lähes keskellä vai täysin oikeassa reunassa. Lukua 70 voi taas siis muuttaa mieleisekseen.

Kuudes rivi (.PageList {text-transform: uppercase; !important;}) kertoo, että välilehtien teksti on CAPS LOCKILLA kirjoitettu. Jos haluat tekstin olevan "normaali", vaihda sanan uppercase tilalle none.

Lisäksi lisää CSS-boksiin seuraavat koodit:

.tabs-inner .section:first-child {
border:none;
}


.tabs-inner .section:first-child ul {
border:none;
}

 
.tabs-inner .widget ul {
background: none;
_background-image: none;
border:none;
}

.tabs-inner .widget li a {
display: inline-block;
font: 11px verdana;
color: #000000;
border:none; 
}

 11px tarkoittaa fontin kokoa - voit muuttaa kyseistä lukua. Verdana taas on fontin nimi, jonka voit muuttaa haluamaksesi esim. corsiva tai arial. Kuusi 0-numeroa taas kertovat fontin värin, joka on tässä tapauksessa musta. Voit muuttaa sitä haluamaksesi joko heksakoodeilla tai engl. kielisillä numeroilla. Blogin väreistä löydät postauksen täältä.


.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: grey;
background-color: transparent;
text-decoration: none;
font-style: none;
}

Boldattu grey taas kertoo fontin värin, kun hiiri viedään tekstin päälle. Voit muuttaa sitä. 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:active {
background-color: transparent;
text-decoration: none;
font-style: none; 
}

***

Toivottavasti tästä oli apua! :)

46 kommenttia:

  1. Tästä oli paljon apua, vaikka vähän tajusinkin jo siellä edellisen postauksen kommenteissa!:) Mulla on sulle taas kysymys:D Nyt kun lisäsin mun blogiin nuo välilehdet tuonne ylös, niiden väleihin tuli tuollaiset valkoiset viivat. Olen joskus saanut ne pois, mutta juuri nyt en millään muista miten:D Osaisitko auttaa asiassa?

    VastaaPoista
    Vastaukset
    1. Kiva että tästä oli apua :-)! Haha :D
      Laitoitko kaikki tässä postauksessa olevat koodit CSS:ään? Jos nimittäin et laittanut, syy lienee siinä. (.tabs-inner .widget li a { -koodi). Koska blogisi on atm yksityinen, en pääse katsomaan, mistä ongelma kiikastaa, mutta veikkaisin että tästä.

      Poista
  2. Ihanaa, että jaksat panostaa tähän apublogiin näin paljon! Nämä yksinkertaiset ja monipuoliset ohjeet helpottavat niin paljon oman blogin ulkoasun muokkaamista. Kiitos kiitos kiitos! :)

    VastaaPoista
    Vastaukset
    1. Ihanaa, että blogistani on iloa niin monille! Tähän nimittäin valuu aika paljon aikaa. :) Kiitos vielä piristävästä kommentistasi <3

      Poista
  3. Heips! Osaisitkohan auttaa tai tehdä omaa postausta tälle aiheelle.. Haluisin saada erilaisen navigointipalkin blogiini (malli simple) ja olen yrittänyt html-koodailla ja saada koodeja toimimaan, mutta ei vaan onnistu! :D Alla olevissa linkeissä näkyy haluamani navigointipalkin ohjeet englanniksi, eli joiden avulla en ole onnistunut. Ja toinen linkki on blogiini.

    http://thebloggingbrew.com/how-to-make-a-sticky-navigation-bar-on-blogger/
    http://sanniautiorinne.blogspot.fi/
    http://www.thenextepisode-katarina.com/ (esimerkki siitä, millaisen navigointipalkin haluaisin)

    VastaaPoista
    Vastaukset
    1. Heippa! Mun onkin pitänyt jo jonkin aikaa toteutella aiheesta postausta, on vaan unohtunut :D Teen postauksen tässä ihan lähipäivinä ellen jo tänään :) Tätä onkin toivottu paljon!

      Poista
  4. Moikka! Olisiko mahdollista kirjoittaa postaus, miten saa Suositut tekstit -gadgetin postausten pikkukuvat pyöristettyä? Jos siis vain osaat, jaksat ja haluat neuvoa siinä, ei ole minulle niin tärkeää mutta saisin vain ulkoasua hienosäädettyä sillä :)

    VastaaPoista
    Vastaukset
    1. Moi Jenna! On mahdollista kirjoittaa aiheesta postaus :-) Mulla on kuitenkin nyt niin paljon postauksia jonossa, että ko. postauksen julkaisemiseen voi mennä tovi, joten annan sulle tähän koodin, jolla saat ne pyöristettyä:

      #PopularPosts1 img {
      border-radius: 100px;
      }

      Tuota lukua 100 voi muuttaa :-)

      Poista
    2. Kiitos paljon avusta! :)

      Poista
  5. Miten blogin ylävälilehtien taustan saisi kokonaan läpinäkyväksi?

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

      Poista
  6. Heippa!
    Olen tehnyt blogiini uuden bannerin, jonka tausta on läpinäkyvä. Simple mallissa tausta kuitenkin on valkoinen. Millä koodilla saisin bannerin taustan läpinäkyväksi, kun banneri kuitenkin ilmeisesti tarvitsee olla simple mallissa, jotta se näyttää fiksulta (bannerin alareuna valkoinen). Banneri ei tällä hetkellä näy blogissani. Toivottavasti ymmärsit asiani ja osaat auttaa :)
    http://siivetonpegasos.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi! Tällä koodilla saat Simple-mallin bannerin taustan pois:

      .content-inner {
      background-color: transparent;
      }

      .header-outer {
      background: none;
      _background-image: none;
      }

      .main-inner{
      background:white;
      }

      Poista
  7. Moikka, tosi kiva ohje!
    En tiedä, olenko vähä-älyinen vai mitä, mutta kuinka banneriin sitten saa tekstiä? :'D

    VastaaPoista
    Vastaukset
    1. Hei!
      Et suinkaan! En vaan aivan tajua, mitä tuolla haet. Vaihtoehtoja on useita (esim. javascriptit). Haluaisitko pidemmän tekstin banneriin vai ihan vain lyhyen sepostuksen? Onko kohdalla väliä?

      Poista
  8. Mulla ei vaan tapahdu mitään vaikka molemmat koodit laittaisinkin?
    > jellonat.blogpot.fi

    VastaaPoista
    Vastaukset
    1. Sama ongelma mullakin D:

      withprinssi.blogspot.com

      Poista
    2. Hei! Sain sittenkin toimimaan :D! Muista painaa enter sen jälkeen kun olet laittanut koodin ;)

      Poista
    3. Juu hyvä, täällä tulikin jo neuvo :)!

      Poista
    4. Mulla ei toimi, vaikka enter. katrikuvat.blogspot.com

      Poista
  9. hei! Tarvisin kiireellisesti apua, mulla meinaan nousi koko juttu eli postauskin bannerin päälle, kun sain aseteltua sivut oikealle kohdalle. Mitä teen? Blogi on sonettaeveliina.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Olet ilmeisesti saanut ongelman selvitettyä?

      Poista
    2. Mullakin nousee koko postaus bannerin päälle.. Ainakin puhelimen ja ipadin internet versiolla
      pikkuponiprinssi.blogspot.fi

      Poista
    3. Vielä se, että minun perus windows koneella näyttää aivan normaalilta, mutta iphonen, ipadin ja meidän applen pöytätietokoneella näyttää että postaukset ja gadgetit menevät bannerin päälle

      Poista
    4. Heh en tarvitse enään apua :)

      Poista
    5. Okei :)! Hienoa, että sait ongelman ratkaistua omin käsin!

      Poista
    6. Mulla on tää sama ongelma, mitä teen?

      Poista
  10. Hei! Oon ihan käsi näiden juttujen kanssa ja oon lopettanut monesti bloggaamisen koska en ole ollut tyytyväinen blogin ulkoasuun :D-
    Osaisitko neuvoa kuinka saisin blogistani ihan simppelin valkoisen, missä kaikki on siististi tasattu, esim. tässä blogissa :http://janninahakola.blogspot.fi/. Tosin ton bannerin tilalle haluaisin jonkun kuvan tekstin kera, mutta en saa asettumaan kuvaa siihen tasaisesti ja hienosti. Toivottavasti osaat auttaa! :)

    VastaaPoista
    Vastaukset
    1. Moi! Hyvä, kun uskalsit rohkeasti tulla pyytämään jelppiä :)!

      VINKKEJÄ
      1. Keskitä gadgetit ja blogitekstin otsikko (ja päivämäärä):
      http://blogikoodeja.blogspot.fi/2014/12/gadgetien-ja-blogiarkiston-keskittaminen.html
      http://blogikoodeja.blogspot.fi/2013/11/gadgetien-otsikkojen-keskittaminen.html
      http://blogikoodeja.blogspot.fi/2013/09/paivamaaran-otsikon-keskitys.html

      2. Käytä taustana valkoista ja säädä kaikkien tekstien väriksi klassinen musta.

      3. Banneri (voi tehdä jollain kuvankäsittelyohjelmalla, jolla lytätään banneriin teksti)n saa keskittymään tästä postauksesta löytyvän koodin numeroa muuttamalla:
      http://blogikoodeja.blogspot.fi/2013/09/bannerin-keskittaminen.html

      Poista
  11. Hei! :) Minulla on bannerissa valmiina teksti, onko bloggerissa mahdollista saada kansikuvaan silleen, että sitä painamalla pääsee esimerkiksi Facebookkiin ? Olen siis muokannut koulussa Illustatorilla bannerin omalla mieleiselläni fontilla, joten onnistuisiko se mitenkään? Tässä vielä blogini osoite; http://mirandlife.blogspot.fi/
    Kiitos paljon, jos osaat auttaa!
    Terveisin; Mira Ps. Oon saanut tästä sivustasi todella paljon hyödyllisiä vinkkejä ja toivon, ettet poista tätä blogiasi. Ihan älyttömän hyvä sivu ja paljon hyödyllisiä vinkkejä! :)

    VastaaPoista
    Vastaukset
    1. Mooi :)! Tarkoitatkohan kansikuvalla banneria? Siis jotain kuvaa painamalla Facebookiin? On takuulla mahdollista, olen vain pahoillani etten oikein ymmärtänyt että mitä kuvaa painamalla :D Osaisitko selittää vähän tarkemmin?
      Siis jos haluat, että banneria klikkaamalla pääsee Facebookiin, toimi näin:
      1. Lataa haluamasi banneri Photobucketiin tms. kuvapalveluun.
      2. Lisää CSS:ään tämä koodi:
      #header{
      display:none;
      {
      3. Katso täältä kohdat 4, 5 & 6:
      http://blogikoodeja.blogspot.fi/2015/04/mouseover-banneri-kun-hiiren-vie.html
      4. Lisää JavaScript-lokeroon tän postauksen koodi:
      http://blogikoodeja.blogspot.fi/2013/10/kuvagadget-josta-paasee-johonkin.html?showComment=1430127755729#c2531676860273087386
      5. Pitäis olla valmista! Monimutkanen ohje, mutta toivottavasti sait kiinni punaisesta langasta :)!

      Hei kiva kuulla enkä tuu poistamaan - vaikka joskus lopettaisin vastailun täällä, tulen silti pitämään blogin netissä, koska täällä on hirveästi koodeja ja moni saa täältä jatkuvasti apua ongelmiinsa :)!

      Poista
  12. Tästä oli tosi tosi tosi paljon apua, kiitos paljon! (:

    VastaaPoista
  13. Mulla nousee kans koko postaus jne bannerin päälle :/ Tai siis mun kaverin blogissa nousee ja mulla ei, miksiköhän?

    VastaaPoista
  14. Mullakin nousee koko postaus ja muut bannerin päälle D:

    VastaaPoista
  15. Mulla nousee noi tekstit bannerin päälle enkä saa niitä mitenkään otettua pois siitä! Voitko auttaa?

    VastaaPoista
  16. Miten saisin nuo sivut tuonne navigointipalkin kohdille ?

    VastaaPoista
  17. Tästä oli paljon apua, mutta haluaisin vielä nuo välilehtien otsikot boldattuna, miten sen saisi? ^-^
    -Kiitos!

    VastaaPoista
  18. Hei, miten saisin muun blogin alemmas, ja pidettyä nuo välilehdet samalla paikalla. Kun nyt tuo päivämäärä esimerkiksi on hieman liian korkealla :/

    porinponitalliry.blogspot.com

    VastaaPoista
  19. moikka!

    oonko ihan tyhmä, jos kysyn miten bannerikuva tehdään banneriin?:D

    VastaaPoista
  20. Moi, mulla kun laitan nuo koodit CSS:ään, nousee muukin blogi mukana ja bannerin alaosa peittyy sen alle :/ blogi tällä hetkellä yksityinen eli en pysty linkkaamaan sitä. :(

    VastaaPoista
    Vastaukset
    1. http://blogikoodeja.blogspot.fi/2013/09/paivamaaran-ja-bannerin-valin.html

      auttaako tämä? muutat vain tuota punaista lukua plussan puolelle! :)

      Poista
    2. ja sit jos se sivupalkki on vieläkin liian ylhäällä, niin sain oman alemmas ainakin tällä CSS koodilla:

      .sidebar {
      margin-top: 245px;
      }

      ja tuota lukua 245 voi siis muuttaa :) itse laitoin siihen saman kuin tuohon aiemmin linkkaamaani bannerin ja päivämäärän välinsäätö lukuun :p

      Poista

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