keskiviikko 10. kesäkuuta 2015

Sticky navigation bar

Mikä ihmeen sticky navigation bar?
Paikallaan pysyvä "linkkipalkki" / navigaatiopalkki blogin yläreunassa bannerin yläpuolella, kun blogia scrollataan alaspäin. Kyseessä on siis ikään kuin ylävälilehdet, jotka ovat normaalisti bannerin alapuolella. Alla oleva kuva toimii esimerkkinä:



Miten blogiin?

1. Ulkoasu > lisää HTML/JavaScript > laita tyhjään boksiin tämä koodi:

<div id="stickynavbar">
<ul>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
<li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
</ul>
</div>


Punaiselle tekstille tulee http-muotoinen linkki (esim. http://blogikoodeja.blogspot.fi/), jonne haluat sivun nimeä klikkaamalla pääsevän. Samalla rivillä mustalla lukevan tekstin tilalle tulee taas sivun nimi (esimerkiksi Etusivu, Instagram, Youtube, Blogin kirjoittajasta...), jota klikkaamalla halutun linkin taakse pääsee. Saattoi kuulostaa vähän monimutkaiselta, joten otetaan esimerkiksi pätkä koodia:

<li><a href="https://instagram.com/ilonameih/">INSTAGRAM</a></li>
<li><a href="https://www.youtube.com/channel/UCYZTBGCMzlyWI3Enw2IqHVQ">YOUTUBE</a></li>


Koodissa on tällä hetkellä viidelle linkille paikat. Jos haluat linkkipalkkiisi esimerkiksi 7 linkkiä, lisää koodiin kaksi seuraavaa riviä: <li><a href="MIHIN TÄTÄ KLIKKAAMALLA PÄÄSEE">SIVUN NIMI</a></li>
 Pätkä(t) lisätään <ul> ja </ul> merkkien sisäpuolelle eli esimerkiksi aiemman samanlaisen koodinpätkän taakse. 

 2. Tallenna ja siirrä kyseinen gadgetti blogitekstien (vihreä) ja sivupalkin (kuvassa sidebar-right-1) yläpuolelle Ulkoasussa. Punaisella rengastettu on siis kuvassa kyseinen HTML/JavaScript-gadget, ja sen paikan tulisi olla siis kuvanmukainen.



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

 .tabs-inner .widget ul {
background: black;
border: none;
text-align: center;

padding: 8px;
}


Musta black tarkoittaa navigaatiopalkin taustaväriä. Voit muuttaa sitä. Jos haluat navigaatiopalkin taustan olevan esim. valkoinen, laita sanan black paikalle white tai heksakoodiarvo #ffffff. Punainen 8 taas tarkoittaa navigaatiopalkin korkeutta / paksuutta. Voit muokata lukua haluamaksesi.

.tabs-inner .widget li a {
border: none;
font: bold 13px arial;
color: white;
}


Punaiseksi värjätty teksti tarkoittaa, että linkkipalkissa näkyvä teksti on lihavoitu, kooltaan 13px ja fontiltaan Arial. Jos et halua boldausefektiä, laita sanan bold tilalle normal. Voit vaihtaa myös tekstin kokoa muuttamalla lukua 13 ja fonttia laittamalla sanan arial tilalle jonkin toisen fontin.
Mustaksi värjätty teksti (white) tarkoittaa, että teksti näkyy valkeana. Jos haluat tekstin näkyvän esim. harmaana, laita sanan white tilalle grey tai väriä vastaava heksakoodiarvo. Voit siis tuosta koodista muuttaa linkkipalkin tekstiä.


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


Musta grey tarkoittaa tässä koodissa tekstin väriä, kun hiiri viedään sen päälle (hover). Koodissa se on harmaa, mutta voit muuttaa sitä.

.tabs .widget li, .tabs .widget li{
display: inline;
float: none;
}

#stickynavbar {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width:100%;
}



Lue myös,
heksakoodeista

80 kommenttia:

  1. KIITOS! pelastit mun päivän:)

    VastaaPoista
  2. Ei toimi mulla :(. Oon yrittänyt moneen kertaan, mutta ei toimi. Tosin se vaihtaa fontit jotka olen koodiin laittanut yms, mutta ei laita sivuja bannerin yläpuolelle. Osaatko auttaa? :)
    http://pippurinenponi.blogspot.fi/

    VastaaPoista
  3. Kyselin sulta vähän aika sitten, miten simple mallista saa taustavärin pois. Koodi auttoi hyvin, mutta bannerin tausta on edelleen haaleampi kuin muu tausta blogissa. Osaatko auttaa tähän?
    http://siivetonpegasos.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi Juulia! Ongelmana näyttäisi olevan blogin varjostukset. Ne saat pois tällä koodilla:
      .content-outer{
      box-shadow:none;
      }

      Poista
  4. hei miten ton sais silleen että se ei rullaudu sivun mukana?

    VastaaPoista
    Vastaukset
    1. sainkin sen kun muutin positionin absoluteks ja sitte laitoin tollasen koodin:
      margin-top: -599px;
      :)

      Poista
    2. Yritän kehitellä jotain helponnettua versiota tuohon, jottei palkki rullautuisi alas, mutta se olisi kuitenkin koneen ruudun levyinen. Stay tuned! Netissä on jotain ohjeita kyllä, mutta kaikki löytämäni ovat englanniksi ja todella monivaiheisia. Mutta stay tuned, katsotaan saanko jotain joskus taiottua! :D

      Poista
  5. öö sori kun kyselen taas mutta tossa äskösessä koodissa mulla oli tuo erilainen ku se oli vaan vasemmassa reunassa semmone laatikko ( tejareca.blogspot.fi )
    mut nyt kyselisin että jos laitan ton tolleen navigointipalkiks ja laitan positionin absoluteks niin siitä tulee vaan bannerin levynen, nii miten siitä sais koko blogin levysen?

    VastaaPoista
  6. karin-julia.blogspot.fi
    esim. tuossa blogissa on sellaset ylävälilehdet joita haen, tosin ilman noita "avautuvia valikoita" tai noita sivuja kun vie hiiren sen likin päälle. haluaisin muuten siis ihan perus ylävälilehdet niinkuin tuossa koodissa minkä laitoit, mutta ilman paikalla pysymis- efektiä.

    VastaaPoista
  7. Moikka! Autoit mua pari postausta sitten tosi paljon! Vielä ois kysyttävää johon toivoisin saavani apua! :)

    1. Miten saan blogin postauksen tekstin ja kuvat (flickrin kautta medium 800x534) saman levyisiksi? Siis että teksti alkaisi ja loppuisi siinä mistä kuvankin reunat.
    2. Entäs miten pystyy muokkaamaan tekstin alatunnisteen fonttia?

    Oon myös keskittänyt postauksien otsikon ja päivämäärän kuten alatunnisteenkin, mutta ne ei näytä olevan enää keskellä, kun isonsin kuvien kokoa postauksissa. Miten pystyy päättämään vapaasti postauksien otsikon ja päivämäärän ja tekstin alatunnisteen paikan? Voisin silmämääräisesti liikuttaa ne hyvään kohtaan, että näyttäisi olevan keskellä. Onko tähän mitään koodia tms?

    Kiitos paljon!!

    VastaaPoista
    Vastaukset
    1. Voi miten kiva, että olen ollut avuksesi :)
      1. Tsekkaapas tämä postaus; http://blogikoodeja.blogspot.fi/2015/01/tekstin-ja-kuvien-alkaminen-samasta.html
      2. Tekstin alatunnisteen fontin muokkaus:
      lisää tämä koodi blogiisi:
      .post-footer{
      font-family: TÄHÄN FONTIN NIMI;
      }

      Viimeiseenkin ongelmaasi on olemassa koodeja. :)

      OTSIKON SIIRTÄMINEN
      h3.post-title{
      margin-left: 30px;
      }

      PÄIVÄMÄÄRÄN SIIRTÄMINEN
      .date-header{
      margin-left: 30px;
      }

      ALATUNNISTEEN SIIRTÄMINEN
      .post-footer{
      margin-left: 30px;
      }

      Kaikissa vain muutat tuota margin-leftin jälkeistä lukua :)

      Poista
  8. niin ja jatko edelliseen eli miten pysty- ja vaakakuvat saa saman levyisiksi postauksessa ilman että laatu kärsii? :-)

    VastaaPoista
    Vastaukset
    1. Kuvan laatuun vaikuttaa niin monta tekijää, joista voi halutessaan googletella. Jos kuitenkin kuvien laatu on niin heikko, että mikäli 700px levyinen pystykuva (jos siis kuvien leveys olisi vaakakuvissakin 700px eli pysty- ja vaakakuvat olisivat samankokoisia) on heikkolaatuinen, kuvien leveyttä täytyy pienentää (myös vaakakuvien), jos ei ole tyytyväinen kuvanlaatuun.
      Tässä kuitenkin postausta, miten pysty- ja vaakakuvat saa samanlevyisiksi:
      blogikoodeja.blogspot.fi/2013/10/pystykuvat-samanlevyisiksi-vaakakuvien.html

      Poista
  9. Koetin aiemmasta kommentista kattoa jo mutta ei toiminu, eli miten saan ton pysymään ylhäällä eikä tulis mukana ku sivua kelaa

    kiitos jo etukäteen

    flywithlittlebirds.blogspot.com

    VastaaPoista
    Vastaukset
    1. Yritän kehitellä jotain edes suhteellisen helposti ymmärrettävää ja toimivaa juttua tähän! :-)

      Poista
  10. Kiitos tuhannesti! Yritin tänään yli VIISI tuntia tehdä tota, mutta nyt sain sen muutamassa minuutissa!! KIITOS!

    VastaaPoista
  11. Miten linkistä (ihan mistä vaan linkistä) saa hiirellä osoituksessa tapahtuvan alleviivauksen pois? :)

    VastaaPoista
    Vastaukset
    1. Käytäs tätä koodia:

      a:hover{
      text-decoration:none;
      }

      Poista
  12. Kiitos tästäkin postauksesta, pitää ehdottomasti joskus kokeilla!

    Btw, mulla ois pari ongelmaa, jos pystyisit yhtään helppaa mikä mättää? Blogi on siis tuulikuvailee.blogspot.fi.
    1) Blogiarkisto kohdassa ei toimi kaikissa kuukausissa toi letter spacing? mulla on css tällänen koodi:
    a:hover {
    letter-spacing: 3px;
    }
    oisinkohan laittanu sen jotenkin väärin vai..?
    2) Alhaalla toi vanhemmat tekstit-linkki ei jostain syystä toimi ja se mua häiritsee tosi paljon... pystyisköhän sen jotenkin palauttaa toimivaks?

    Kiitos tuhannesti jos osaat auttaa mua! Oon ihan toivoton itte ja mun koodaustaidoilla en osaa näitä ongelmia ratkaista :/

    VastaaPoista
    Vastaukset
    1. 1) Käväisin katsomassa, ongelma näyttäisi korjaantuneen :)
      2) Kokemukseni mukaan vanhemmat tekstit -linkki lopettaa toimintansa, mikäli blogissa on koodeja, joissa on jokin virhe. Suosittelen, että kopioit CSS-boksin koodit ja klikkaat valitsemaasi mallia uudestaan, joka vie kaikki ulkoasunmuokkaukset pois. Sitten tallennat ja kokeilet, toimiiko linkki nyt. Jos toimii, ulkoasuasi muokatessa pidä varasi, että koodit toimivat eivätkä ole ristiriidassa toistensa kanssa.

      Toivottavasti tästä oli apua!:)

      Poista
  13. Hei, sellanen juttu joka ei nyt varsinaisesti tähän liity, että miten nuo gadgetit/widgetit saisi lähemmäksi sitä teksti osiota. Minulla ne ovat harmillisen kaukana siitä keskellä olevasta tilasta, eli siitä teksti osiosta.

    Tuossa osoite: http://taivaanjamaanvalissa.blogspot.fi/

    Ps, jos joku eksyy sinne, blogia vasta perustellaan. :)

    VastaaPoista
    Vastaukset
    1. Ei haittaa, vaikkei kommentoimaasi postaukseen kysymyksesi liittyisikään :)
      Lisää CSS:ään tämä koodi:
      .sidebar{
      margin-left: -20px;
      }

      Lukua -20 voi muuttaa! :)

      Poista
  14. Hei!
    Minulla on pieni probleema, haluaisin koko oikeaa sivupalkkiani(gadget-sivu) alaspäin samalle tasolle tekstin otsikon kanssa. Tarkoitan kyseisen kuvan (oikealla) saamista samalle tasolle tekstin otsikon kanssa. Linkkaan blogini, niin tiedät mitä tarkoitan -> http://emmiinakurki.blogspot.fi/
    Voisitko mitenkään auttaa ongelmassani..? Toivoisin, että voisit.

    VastaaPoista
    Vastaukset
    1. Moikka! Lisää tämä koodi CSS:ääsi:
      .sidebar{
      margin-top: 20px;
      }

      Lukua 20 voi muuttaa :)

      Poista
  15. Hei! Osaisitko auttaa minua saamaan blogin pohjavarjon pois? Minulla on mallina vesileiman pinkki pohja :).

    VastaaPoista
    Vastaukset
    1. Heips! Lisää CSS:ään alla oleva koodi:
      .post-outer {
      box-shadow:none;
      }

      Poista
  16. En tiijä ootko kertonut tän jossain, mutten löytänyt ettimällä joten kysyn:
    Miten saisin taustan badgetteihin? Tarkotan semmosta, joka ois koko alueella, vähän ninkuin noi kehykset.

    VastaaPoista
    Vastaukset
    1. Hei! Taidat tarkoittaa gadgetteja? Eli se kehysten sisäinen alue? Jos siis haluat taustavärin, tässä koodi siihen:
      .sidebar{
      background: TÄHÄN SE VÄRI;
      }

      Ja jos haluat taustakuvan, tässä koodi siihen:
      .sidebar{
      background:url(TÄHÄN KUVAN HTTP-OSOITE);
      }

      Poista
  17. Moikka! Mulla ongelmat tuli vastaan samantien, missä lukee javascript kun mulla lukee vaan "muokka html koodia" ja mihin ihmeen tyhjään laatikkoon???

    VastaaPoista
  18. css koodit ei toimi. Palkki tulee mutta ei minkään värisenä eikä mene ylös eikä muuta fontin kokoa jne.

    VastaaPoista
    Vastaukset
    1. Olet ilmeisesti saanut ongelman korjattua? Käväisin nimittäin blogissasi :)

      Poista
  19. En saa jostain syystä sticky navigation barin tekstiä keskelle, vaikka CSS:ään oon kirjoittanut mukaan tuon "text align: center;". Idoita, miten tämä onnistuisi? :-)

    VastaaPoista
    Vastaukset
    1. Nyt onnistui, kiitos kovasti ohjeesta! Vielä 2 muuta kysymystä. mulla on mouseover-banneri, muttei se keskity, vaikka olen sen erikeen keskittänyt ohjeiden mukaan. Miksei tämä toimi?

      Mua kiinnostaisi myös saada sticky navigation bar niin, että kun hiiren vie siinä olevan tekstilinkin päälle, kyseinen linkki alleviivaantuu. Tätä ei siis tulisi muihin kuin sticky navigation barin linkkeihin. Miten saisin tämän idean toteutettua? :-)

      Poista
    2. Loistavaa, että sait ongelman itse ratkaistuksi :-)

      ONGELMA 1
      Omaa syytäni, että vastaan näin myöhään - blogissasi ei ole enää mouseover banneria, joten ongelmaa on vaikea ratkaista. Jos siis olit laittanut ohjeiden mukaan koodin alkuun ja loppuun < center > yhteenkirjoitettuna, bannerin olisi pitänyt keskittyä. Näin on vaikea osata sanoa, mikä ongelman aiheutti.

      Valitettavasti en tähän hätään onnistu saamaan stickynavbarin hover-alleviivaantumista toimimaan, joten en viitsi antaa vaillinaista ei-toimivaa versiota (jonka kyllä pitäisi toimia, mutta ei kuitenkaan toimi :D). Koitan saada asian kaiken maailman vääntelyillä ja kääntelyillä toimimaan!

      Poista
  20. http://rvpriding.blogspot.fi

    moi, miten saan sticky nav barin ylös enkä tonne bannerin alapuolelle? Olisin tosi kiitollinen jos vastaisit :)!

    VastaaPoista
    Vastaukset
    1. mietin samaa :D ja silleen että se siis pysyy siinä kohdassa missä on että ei oo kokoajan näkyvissä

      Poista
    2. Ikävä kyllä stickynavbaria ei saa jämähtämään paikoillensa silleen, ettei se rullautuisi sivun rullautumisen mukana, vaan hommaan on olemassa eri tapoja, joita en ihan niiden vaativuuden takia lähde nyt kommenttiboksiin selittämään. Koitan kehitellä jotain vähän simppelimpää!!

      Poista
  21. Hei! tämä oli tosi hyvä ja selkeä postaus, sain palkin blogiin! Haluaisinkin vielä kysyä että kun noita sivuja tonne lisäilee ja itsellä siellä on nyt sellanen ''about me'' kohta johon nyt tarvitsin linkin. Miten sellaisen profiili sivun saa tehtyä bloggerilla? Eli kun tuota linkkiä painaa niin se menisi erillisille sivulle jossa on sitten kerrottu tietoja itsestäni.

    http://sanni-eerika.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi :)! Profiilisivun, jonne pääsee sivupalkissa klikkaamalla kuvaa, saa tehtyä näin:

      1. Luot uuden sivun, ja kun olet luonut sen, paina näytä ja kopioi sivun osoite linkkipalkista.
      2. Mene Ulkoasu-> lisää gadget-> HTML/JavaScript
      3. Liitä tämän postauksen koodi ja toimi ohjeiden mukaan:
      http://blogikoodeja.blogspot.fi/2013/10/kuvagadget-josta-paasee-johonkin.html?showComment=1430127755729#c2531676860273087386

      Poista
  22. Heippa Ilona!

    Kiitos ensinnäkin todella hyvästä blogistasi, perustin omani eilen ja tein suurimman osan muutoksista ohjeittesi avulla. :)

    Osaisitkohan auttaa tässä: tein sticky navigation palkin ja se toimii hyvin. Yksi kohta palkissa on Recipes ja haluaisin tehdä sinne kakkujen nimillä linkin aina tiettyyn postaukseen tähän tyyliin:

    Recipes- sivu palkista: http://www.tarteletteblog.com/2005/08/recipe-index.html
    --> Blueberry Key Lime Tea Cakes
    --> siirtyy tiettyyn postaukseen: http://www.tarteletteblog.com/2012/08/recipe-gluten-free-blueberry-key-limes.html

    Blogini osoite on http://pastriesbaby.blogspot.fi/ ja jos tuntuu, että on helpompi viestitellä sähköpostitse, osoitteeni on pastriesbaby@gmail.com. Kiitos avusta jo etukäteen!

    VastaaPoista
    Vastaukset
    1. Tarkennan vielä edelliseen, tällä hetkellä palkissa ei siis näy tuota Recipes-kohtaa, ainoastaan Home, Faq ja About. :)

      Poista
  23. Heips!

    Keksinkin, miten voin tuon sivuilleni laittaa, tää on tällaista opettelua vielä. :) Kivaa syksyä!

    VastaaPoista
    Vastaukset
    1. Kiitos paljon ja loistavaa, että sait ongelman itse ratkaistua! Kivaa syksyä sinullekin :)!

      Poista
  24. Moikka! Lisäsin tuon sticky navigaatiopalkin blogiini ja se näytti kivalta. Jostain syystä se on nyt kuitenkin muuttunut. Poistin sen kokonaan ja poistin myös koodin html-osasta. Sitten lisäsin koko jutun uudestaan, mut kun yritän tota koodia laittaa ja muokata fontteja yms, ei tapahdu mitään ja toi navigaatiopalkki on ihan väärässä kohdassakin ja siinä on joku valkoinen merkki. Onko mitään enää tehtävissä? :D Ja sitten kysyisin vielä kun haluisin noiden tunnisteiden alta nuo katkoviivat pois? http://lindadadam.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi!

      Tunnisteista sulla onkin jo katkoviivat pois?

      Kokeile poistaa kaikki sticky navbariin liittyvä, jonka jälkeen nollaat tämänhetkisen mallisi siten, että valitset tämänhetkisen mallisi uudestaan / jonkun uuden mallin. Koita sen jälkeen tehdä sticky navbar uudestaan. Ps. HTML-koodiin ei tässä jutussa tarvitse kajota ollenkaan - luultavasti se on jumittanut CSS-boksin :/

      Poista
  25. Hello! Miten onnistuu linkkien levitys koko blogin leveydelle toisin sanoen miten saan lisättyä sivujen väliä?
    http://idamariaankkuri.blogspot.com

    VastaaPoista
    Vastaukset
    1. Moi! Kokeiles tätä koodia:
      .tabs-inner .widget li a {
      margin-left: 100px;
      }

      Lukua 100 voit muuttaa :-)

      Poista
  26. Haluiaisin saada tähän navbariin reunan, kuten esimerkiksi tässä blogissa: http://sofiaelizabetha.blogspot.fi/

    Miten onnistuisi? Ja miten saan navbarin tekstin kauniisti vasemmalle, niin että kaikki otsikot näkyvät?

    VastaaPoista
    Vastaukset
    1. Moi!

      Korvaa tää koodi:
      .tabs-inner .widget ul {
      background: black;
      border: none;
      text-align: center;
      padding: 8px;
      }

      Tällä koodilla:
      .tabs-inner .widget ul {
      background: black;
      border-bottom: red 3px solid;
      text-align: center;
      padding: 8px;
      }

      Poista
    2. Teksti vasemmalle;
      Muuta tosta edellisestä koodista text-align: center; center-sana leftiksi eli:
      text-align: left;

      Poista
  27. http://katvonyvon.blogspot.fi/ millähän mä saisin noi välit linkeistä pois? :D haluaisin ihan et toi on pelkkää harmaata.

    VastaaPoista
    Vastaukset
    1. Moi! Koklaa tätä koodia:

      .tabs-inner .widget li a {
      border:none;
      }

      Poista
  28. Osaaks neuvoo miten tohon sais lisättyä blogiarkiston? :)

    http://wwhite-clouds.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Ikävä tuottaa pettymys, mutta tällä hetkellä en tiedä tuohon kysymykseen vastausta. Koitin jopa googletella, mutta en löytänyt apua.. :/

      Poista
  29. Hei! Ihana tää sun blogi! Innostuin just tästä erilaisesta navista, mutta ei toimi mulla :/ Osaatko auttaa mikä vikana?

    sarabeella.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Olet näköjään saanut ongelman korjattua. Jos ongelmia ilmenee yhä, ilmoittele!

      Poista
  30. Heippa taas! Ja kiitos paljon aikaisemmasta vastauksesta, siitä oli todella paljon apua! :)
    Nyt pitää kyllä kysyä taas näppärämmältä, osaatko sanoa mitenkä näihin saisi nämä alasvetolaatikot (esim tässä blogissa: http://jonnamaista.com) Mä luulin jo kerran löytäneeni sen ohjeen mutta jostain syystä onnistuin hukkaamaan sen ennenkuin kerkesin edes kokeilla.
    Mun blogi on http://hennankengissa.blogspot.fi (nyt siinä vielä normi sivut!) Kiitos taas paljon vastauksesta jo etukäteen :)

    VastaaPoista
    Vastaukset
    1. Moi! Tarkoitat varmaankin Drop Down Menua. Koska homma on melko monimutkainen, en ala selittämään sitä tästä, vaan linkkaan sulle tähän ohjeet. Olen ajatellut väsätä aiheesta postauksen - ikävä kyllä vasta joululomalla, koska juttu on aika iso eikä todellakaan mistään helpoimmasta päästä.
      http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
      http://icanbuildablog.com/2015/08/how-to-add-a-drop-down-menu-to-a-blogger-blog-without-javascript/
      https://www.nosegraze.com/how-to-add-a-drop-down-menu-navigation-in-blogger/

      Toivottavasti onnistut jonkun noista ohjeilla! :)

      Poista
  31. Mitäköhän tein väärin, kun mulla ei tuu mitään palkkia, mutta osiot (esim etusivu, about, instagram ym) ilmestyvät bannerin yläpuolelle luettelon kaltaisessa listassa?

    VastaaPoista
    Vastaukset
    1. Hei! Pystyisitkö linkkaamaan blogisi, jotta pääsisin katsomaan ongelmaa lähdekoodista? Luulisin, että ongelma on lisäämässäsi CSS-koodissa ja siinä, ettei se toimi oikein.

      Poista
  32. Osaisitko auttaa, miksi blogiini tulee sellainen musta palkki blogini otsikon alle :/

    VastaaPoista
    Vastaukset
    1. Ja mun blogi siis oli: sarabeella.blogspot.fi

      Poista
    2. Oot näköjään saanut ongelman hoidettua ihan itse - loistavaa työtä! :)

      Poista
  33. Kiitos paljon tästä blogitekstistä! :) En yhtään yllättynyt että löysin tähän ohjeen sun blogista ♥ Ajattelin vaan kysyä, että onko tosta Sticky nav barista mahdollista tehdä sellaista, että kun linkeistä klikkaa, ne sivut avautuisi omalle välilehdelleen? Koitin pähkäillä aluksi itse, mutta en keksinyt mitään :D

    ♥ Sini | myblog-bysini.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi! Sovella näitä ohjeita: https://www.jyu.fi/itp/plone-ohjeet/pikaohjeet/linkki-uuteen-ikkunaan

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

    VastaaPoista
  35. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
  36. Moikka! Miten saisin tuon palkin osittain läpinäkyväksi, kun rullaa alaspäin sen taustaväri ei ole sataprosenttinen vaan hieman haalea?

    VastaaPoista
  37. Hei!

    Onnistuin asentamaan sticky-barin blogiini eilen, mutta muutaman kysymys silti on:

    1. Laitoin yhdeksi sticky-linkiksi "kirjoittaja". Miten saan tehtyä blogipostauksen, joka näkyy vain kyseisen linkin takana eikä tule blogin etusivulle uudeksi postaukseksi?

    2. Aion vielä säätää blogin ulkoasun leveyksiä, miten saan sticky-barin saman levyiseksi kuin otsikkobannerin, eli keskitettyä sen bannerin alle?

    3. Blogissani on "kokkailtu on"-osio, eli linkkejä jo aiemmin tekeemini ruokiin. Onko koko se litania, eli kaikki ne linkit, saatavissa myös yhden sticky-linkyn alle?

    Blogini on http://gingerjamms.blogspot.fi/. Kiitos jo etukäteen vastauksista!

    VastaaPoista
  38. Kiitos avusta! Toimi hyvin. :)

    ♥: http://tildahytonen.blogspot.fi/

    VastaaPoista
  39. Hei,
    pystytkö auttamaan minua?
    Minulla ei ole ulkoasussa kohtaa lisää HTML/JavaScript. Miten toimin ?
    Ps. huippu blogi! Tästä on ollut kovasti hyötyä, iso kiitos :)
    https://tzenni.blogspot.fi/

    VastaaPoista
  40. Hei, sain tuon palkin vihdoin korjattua. En siis siihen tarvitse enää apua. Voisitko kuitenkin neuvoa kuinka saan nuo palkin tekstit enemmän erilleen toisistaan?
    Suuret kiitokset:)
    https://tzenni.blogspot.fi/

    VastaaPoista
  41. Moikka taas ! Mulla ei toimi tämä koodi omassa css:ssä. Nämä palkit tulevat vain sellaiseksi jonoksi vasemmalle puolelle bannerin viereen. Näistä linkeistä pääsee kyllä oikeille sivuille mutta ei tule sitä palkkia ylös... mikä voisi olla syy?

    lifewith-milla.blogspot.fi

    VastaaPoista

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