Ohjeet dropbar -menun tekemiseen alapuolella :) Dropbar -menulla tarkoitetaan siis avautuvaa valikkoa, josta päästään muille sivuille linkkien avulla.
HUOM! Koodia täytyy itse osata käsitellä enkä suosittele tätä ihan aloittelijoille! Oman blogin säädöt on tunnettava hyvin jotta koodin saa toimimaan!
1. Mene blogisi hallintasivulle ja valitse vasemmalta kohta "Ulkoasu"
2. Valitse otsikon alapuolella olevasta sarakkeesta "Lisää gadget" (Vaihtelee teemoittain)
3. Valitse listasta "Html/JavaScript"
4. Eteesi aukeaa tyhjä Html/JavaScrpt laatikko
Liitä siihen alla oleva koodi (Huom. Olen itse customoinut koodin tehden siitä mahdollisimman yksinkertaisen, koodiin täytyy kuitenkin itse kirjoittaa linkkejä ja otsikoita. Olen capslockannut kaikki itse kirjoitettavat kohdat. Olen myös kappalejaoittanut dropbarin osat joten jos haluat enemmän kohtia, kopioit vain edellisen kappaleen viimeiseksi)
<ul id='cssnav'>
<li class="active"><a href='TÄHÄN TULEE BLOGISI ETUSIVUN OSOITE'>
Etusivu</a></li>
<li class="sub"><a href='TÄHÄN TULEE ENSIMMÄISEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 1</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>
<li><a href='TÄHÄN TULEE TOISEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 2</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>
<li><a href='TÄHÄN TULEE KOLMANNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 3</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>
<li><a href='TÄHÄN TULEE NELJÄNNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 4</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>
<li><a href='TÄHÄN TULEE VIIDENNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 5</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>
5. Kun olet lisännyt ylläolevan koodin javascript laatikkoon, ja tehnyt siitä mieleisesi, tulee sinun tallentaa se ja siirtyä "Teema" -sivulle hallintasivulta
6. Tämän jälkeen valitse kohta "Muokkaa"
7. Valitse vasemmasta sarakkeesta kohta "Lisäasetukset"
8. Tämän jälkeen kelaa avautuva lista ihan alas ja valitse kohta "Lisää CSS"
9. Eteesi avautuu CSS laatikko, lisää siihen alla oleva koodinpätkä.
#cssnav {
margin: 0px 0 0 -10px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: left;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
10. Nyt sinulla pitäisi olla toimiva dropbar -menu :)
![Dataksi [Ylläpitäjä]](http://3.bp.blogspot.com/-Cm_Nbufn5tw/XUcG7Lel3zI/AAAAAAAAEQ8/Gqebh3l7YTIYkApBy2jxFqqukEu8Zwy_QCK4BGAYYCw/s292/just%2Ba%2Bglitch%2Bin%2Bthe%2Bsystem.gif)
