Esiin tuleva navigaatiopalkki hiiren vietäessä päälle

Heippa! Tänään kerron teille koodin, joka poistaa blogista navigaatiopalkin, mutta kun hiiren vie blogin yläreunaan navigaatiopalkin paikalle, se ilmestyy. Hah, olenpa hyvä selittämään näitä asioita :D

Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:

#navbar-iframe {
opacity: 0.0;
filter: alpha (opacity = 0, FinishedOpacity = 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#navbar-iframe:hover {
opacity: 1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

Koodi on "liukuva", eli navigaatiopalkki ei tule esiin töksähtäen, vaan transition-efektinä.

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

Navigaatipalkin poistaminen & siitä aiheutuvan tyhjän tilan deletoiminen + infoa

MITEN POISTAT NAVIGOINTIPALKIN?
- Mene ulkoasuun, sieltä klikkaa navigointipalkin muokkaa-kohtaa, rullaa alas ja kliksuta "ei käytössä" -nappulaa. Sitten vain suoritat tallennukset. Alla oleva kuva havainnollistaa.

Kun navigointipalkin poistaa, palkki jättää blogiin tyhjän tilan. Suunnilleen samalta pitäisi näyttää blogissasi kuin alla olevassa kuvassa:

Jos ylimääräisen tilan haluaa pois, lisää tämä koodi blogisi CSS:ään:
.content-inner {
margin-top: -30px;
}

Ja tältä näyttää, kun koodin lisää:

Tästä aiheesta pyydettiin postausta, joten tein sen ilomielin. Ilmoitelkaa ihmeessä jatkossakin teidän mieltä askarruttavia blogiongelmia! Yritän toteuttaa niitä, kun multa löytyy sopivasti aikaa. Haha, onneksi eka jakso ei ole tiukka :)!

Navigaatiopalkin värin muuttaminen

Tämän koodin kanssa minulla oli hankaluuksia saada se toimimaan

tässä blogissa; kynsiblogissani (olen lopettanut) koodi kyllä toimi,

ja lopulta sain sen toimimaan tässäkin blogissa. Kyseessä on

siis navigaatiopalkin värin muuttaminen, ja tähän blogger

ei tarjoa valmiina kuin muutaman värin Ulkoasu-välilehdessä.

Malli -> Mukauta -> Lisäasetukset -> CSS

Lisää CSS:ään alla oleva koodi:

#navbar-iframe {
background:#ffffff;
}

 HTML-värikoodia (koodissa valmiina punaiseksi värjätty f-sarja,

joka on värinä valkoinen) voi muuttaa mieleisensä mukaan

miksi tahansa HTML-värikoodiksi. 

Klikkaa tästä päästäksesi

Color Codes -sivulle, jonka paletista voi päättää mieleisensä

värikoodin

********** 

Kertokaa ihmeessä, toimiko koodi teillä!

ps. muutin ulkoasusta hieman jouluisemman, hope you like! :)

xoxo iltsu