Palkki blogin yläreunaan

Tällä hetkellä blogien ulkoasuissa suositaan tosi paljon erilaisia yläpalkkeja ja varsinkin sellasia mustia jotka seuraa siellä sivun yläreunassa scrollattaessa. Tätä trendiä mukaillen ehkä 40% kaikista koodaukseen liittyvistä kysymyksistä mitä multa kysytään menee nykyään about näin "Miten saan blogin yläreunaan mustan palkin joka liikkuu sivun mukana ja jossa on linkkejä?". Tänään kun vastailin ask.fm kysymyksiin törmäsin siihen taas ihan luvattoman monta kertaa. Päätin nyt sitten kanavoida tän ärsytykseni tekemällä kyseisestä aiheesta postauksen. Asia ei oo mitenkään maailman yksinkertasin joten en oo askissa sitä alkanut mitenkään yksityiskohtasesti kenellekkään selittämään, mutta toivon, että näin pääsen niistä kysymyksistä eroon. Ei voi ainakaan väittää, etteikö tätä postausta teidän kannalta olis toivottu.
Kaikille toiveikkaile, jotka uskoo nyt ratkasun löytyvän kaikkiin ongelmiin, haluan heti alussa sanoa: TÄ EI OLE MIKÄÄN YKSINKERTANEN JUTTU! Jos ette ymmärrä yksinkertasimmista koodi jutuista mitään, ette todennäköisesti saa tästä postauksesta mitään irti.

Sitten asiaan...

CSS

Seuraava pätkä sinne koodin head osioon (<head> ja </head> väliin) johonkin sopivaan kohtaan.

/* Yläpalkki
------------------------------------- */
.navbarouter {
z-index: 9999;
position: fixed;
top: 0;
width: 100%;
background-color: #000;
}
.navbarinner {
padding: 10px;
text-align: center;
}
.navbarinner a:link {
padding: 10px;
color: #fff;
}
.navbarinner a:visited {
color: #fff;
}
.navbarinner a:hover {
color: #333;
}


HTML

Seuraava pätkä pitäis lisätä HTML-koodiin kohdan <body alapuolelle.

<div class="navbarouter"><div class="navbarinner">
<a href="YOUR.URL">link1</a>
<a href="YOUR.URL">link2</a>
<a href="YOUR.URL" target="blank">link3</a>
<a href="YOUR.URL">link4</a>
</div></div>

Kohdat YOUR.URL korvataan linkiellä ja link1-4 korvataan tekstillä joka halutaan siellä yläpalkissa näkyvän.

Siinä olis todella "alkeellinen" yläpalkki, mutta jos siitä haluu vähän uniikimman niin tota täytyy muokata. Siihen käytetään sitten nimenomaan niitä ihan perus juttuja eli esim fontin muokkaaminen jne...

Comments

  1. en kyllä yhtään tajua mihin osioihin koodit pitää laittaa.. Voitko selittää mikä osio on head ja mikä body :D ? ://

    ReplyDelete
    Replies
    1. Menemällä sinne koodiin ja etsimällä (ctrl+F) sieltä kaksi kohtaa joissa lukee head ja niiden välissä on head osio ja body-osiolle sama :)

      Delete
  2. mikset vois ottaa vaikka screenshotit niin vois tyhmempikin tajuta että mihkä kohtaan pitää laittaa:(

    ReplyDelete
    Replies
    1. Noin puolet koodista on head-osiota ja puolet body-osiota, joten mun on hankala sanoa mitään tiettyä paikkaa saatika sitten ottaa screenshottia siitä, koska jokasen koodi on vähän erilainen :)

      Delete
  3. tiiän ettei mikään noista oon kellään samalla rivillä, mutta millä sulla on, niin voin suunnilleen katsoa, kun ei tunnu vaan löytyvän mistään? D:

    ReplyDelete
    Replies
    1. Laita blogis osote ni kerron sulle mistä ne löytyy

      Delete
    2. Juu blogi ois www.lauraahs.blogspot.fi :)

      Delete
    3. Head löytyy ihan koodin ensimmäisiltä riveiltä etsimällä <*head*> (ilman tähitä) löydät. Ja ton CSS koodin voit sijoittaa esimerkiksi kohdan /* Header yläpuolelle.
      Body löytyy jostain rivin 600 jälkeen kun etsit body class löydät. HTML koodin voit sijoittaa esimerkiksi kohdan <*header*> (ilman tähtiä) yläpuolelle.

      Delete
  4. kiitos paljon sain tän toimimaan! Mietin vaan, että pystyykö tällä yläpalkilla tekemään sitä toimintoa, missä sivu aukeaa , kun vie hiiren päälle, esim. niinkuin sulla on?

    ReplyDelete
    Replies
    1. Saa mut se on sit taas jo ihan toinen, juttu jota en tässä ala selittämään :)

      Delete
    2. Joo isi osaaki auttaa mua loppujen kanssa ni kiitos paljon! :)

      Delete
    3. Hei vitsi mäki haluun tollasen isin, joka osais auttaa mua näissä asioissa! :Dd

      Delete
  5. mä sain tän vast äsken jotenkuten tonne ylös mut en haluu tollast mist klikataan ni et mitenkään vois kertoo et mikä koodi tonne css pitää lisää et saa sellasen dropdown menu homman? ja et mitä ja minne sinne html koodiin pitää ja mikä koodi et saa sellasen hoverin?

    ReplyDelete
    Replies
    1. Jos mä sanoin tosta pelkän palkin laittamisesta että tä ei ole mikään yksinkertainen juttu, niin toi dropdown menu on vielä sitä paljon vaikeempi. En ala selittämään sitä
      a) koska se on tosi monimutaknen juttu selittää,
      b) niitä on tosi monta erilaista tapaa tehä se ja googlaamalla löytyy kyllä ohjeet, ja
      c) se vaatii paljon pohjatietoa jota monella ei ole, joten päätyisin käyttämään kaiken aikani sitä yhä yksityiskohtasemmin selittämiseen.

      Delete
  6. eikös kummatkin koodit tule silti sinne "muokkaa HRML-mallia" kohtaam??

    ReplyDelete
  7. minkä linkin pistän siihen, jos haluun että sitä painamalla voi liittyä lukijaksi?

    ReplyDelete
    Replies
    1. Riippuu mitä kautta. Esim jos vaikka haluut sen bloggerin kautta voit tehdä niin, että laitat sivupalkkiin bloggerin oman seurauslinkin ja kopioit siitä osoitteen ja laitat sen.

      Delete
  8. Miksi minulla blogin ylänurkassa lukee vain /* Yläpalkki ------------------------------------- */ .navbarouter { z-index: 9999; position: fixed; top: 0; width: 100%; background-color: #000; } .navbarinner { padding: 10px; text-align: center; } .navbarinner a:link { padding: 10px; color: #fff; } .navbarinner a:visited { color: #fff; } .navbarinner a:hover { color: #333; }
    ABOUT ME CONTACT FOLLOW INSTAGRAM


    Mitä minun täytyisi tehdä?

    ReplyDelete
  9. Kiitos paljon tästä, olen etsinyt piiiiiiiiiiiiiiiiiitkän toimivaa ohjetta tähän, enkä ole sellaista ennen tätä löytänyt ja tähänkin minut oikeastaan Emilia Christine linkkasi, joten kiitokset kuuluvat myös hänelle. Mutta iso kiitos myös sinulle, Julia! :)

    ReplyDelete
  10. hei miten saisin tän bannerin alle niinku get a grip blogissa?

    ReplyDelete
  11. hei tohon äskeisiin mun lähettämään kommenttiin sen verran vielä et luuletko et ois helpompaa lähtee siitä bloggerin sivut hommasta muokkaamaan, meinaan osaan sen verran hyvin koodailla et uskon senki onnistuvan, mut se sijoitus vaan ei oikeen onnistu? :)

    ReplyDelete
    Replies
    1. En muista miten oon Oonalle tehny, mutta siitäkin onnistuu varmasti. Jos mahdollista kannattaa käyttää sitä bannerin alapuolella olevaa gadgetti kohtaa.
      http://www.w3schools.com/cssref/pr_class_position.asp < tuolla näyttäis ainakin olevan tosta kohdistamisesta ohjeita.
      Sen lisäks sun täytyy muistaa laittaa se ylimmäiseksi z-indexin avulla ja position: absolute kannattaa olla myös. Kaikista löytyy ohjeita ihan googlaamalla :)

      Delete
  12. Kiitos tästä tutoriaalista! Oon koittanut kalastella juurikin tätä yläpalkkia kaikkialta ja itse koodaamalla en oikein tiennyt mistä aloittaa. Siis huonona koodarina :D Vihdoin viimein ymmärsin hakea suomeksin jotain tähän liittyvää, niin sun blogi pompsahti ihan ekana hakutuloksena.Helppo ja ymmärettävä, hyvä tarpeellinen ohje! :)

    / / love - m.i.e. .com

    ReplyDelete
  13. Osaisitko neuvoa vielä dropdown -menun noihin palkkeihin, samalla lailla kun esimerkiksi Saijiksen (http://saijis.blogspot.fi/) blogissa?

    ReplyDelete
    Replies
    1. Se on tosi monimutkanen juttu, joten en lähe sitä nyt ihan perustavan laatuisesti selittämään. Periaatteessa kuitenkin se drop down menu sijotetaan tossa koodissa noiden ensimmäisen kahden div tägin jälkeen :) Googlaamalla löytyy erilaisia dropdown menu ohjeita... Esim. http://codepen.io/philhoyt/pen/ujHzd

      Delete

Post a Comment