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.
HTML
Seuraava pätkä pitäis lisätä HTML-koodiin kohdan <body alapuolelle.
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...
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>
<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...
en kyllä yhtään tajua mihin osioihin koodit pitää laittaa.. Voitko selittää mikä osio on head ja mikä body :D ? ://
ReplyDeleteMenemä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 :)
Deletemikset vois ottaa vaikka screenshotit niin vois tyhmempikin tajuta että mihkä kohtaan pitää laittaa:(
ReplyDeleteNoin 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 :)
Deletetiiä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:
ReplyDeleteLaita blogis osote ni kerron sulle mistä ne löytyy
DeleteJuu blogi ois www.lauraahs.blogspot.fi :)
DeleteHead 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.
DeleteBody 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.
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?
ReplyDeleteSaa mut se on sit taas jo ihan toinen, juttu jota en tässä ala selittämään :)
DeleteJoo isi osaaki auttaa mua loppujen kanssa ni kiitos paljon! :)
DeleteHei vitsi mäki haluun tollasen isin, joka osais auttaa mua näissä asioissa! :Dd
Deletemä 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?
ReplyDeleteJos 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ä
Deletea) 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.
eikös kummatkin koodit tule silti sinne "muokkaa HRML-mallia" kohtaam??
ReplyDeleteJuu
Deleteminkä linkin pistän siihen, jos haluun että sitä painamalla voi liittyä lukijaksi?
ReplyDeleteRiippuu 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.
DeleteMiksi 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; }
ReplyDeleteABOUT ME CONTACT FOLLOW INSTAGRAM
Mitä minun täytyisi tehdä?
Etsi toi kohta sun koodista ja ota se pois :D
DeleteKiitos 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! :)
ReplyDeleteKiva, että voi olla avuksi :)
Deletehei miten saisin tän bannerin alle niinku get a grip blogissa?
ReplyDeletehei 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? :)
ReplyDeleteEn muista miten oon Oonalle tehny, mutta siitäkin onnistuu varmasti. Jos mahdollista kannattaa käyttää sitä bannerin alapuolella olevaa gadgetti kohtaa.
Deletehttp://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 :)
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! :)
ReplyDelete/ / love - m.i.e. .com
Osaisitko neuvoa vielä dropdown -menun noihin palkkeihin, samalla lailla kun esimerkiksi Saijiksen (http://saijis.blogspot.fi/) blogissa?
ReplyDeleteSe 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