بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
 |
| Zoom for Preview |
Tutorial ini tentang navigation yang saat dihover akan keluar submenu-submenu-nya. Keuntungannya sih bisa menghemat tempat karena submenu yang banyak bisa dikumpulin menjadi satu menu.
Misalnya, menu 'CONTACT' kita bisa menambahkan submenu twitter, tumblr, facebook, flavors, dan lain-lain. Tapi, yang kelihatan pertama cuma menu 'Contact'. Setelah dihover, baru keluar sub menu-nya.
Saya sudah coba di Template Designer dan di Classic template.
Okay, ini stepsnya.
/* Menu Horizontal Dropdown ----------------------------------------------- */
#menuwrapper{
width:960px;
height:20px;
margin:0 auto}
.clearit{
clear:both;
height:0;
line-height:0.0;
font-size:0}
#menubar{
width:100%}
#menubar,#menubar ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0}
#menubar a{
display:block;
text-decoration:none;
font:12px calibri;
color:#ccc; background:#eee;
margin-left:20px;
border-right:1px solid #fff;
padding-left:18px;
padding-right:18px;
text-align:center;}
#menubar a.trigger{
text-align:center;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUIb_SvolWb52lZXQCj-dyRirJTlqPRJI28p0J9z64GNKxWkc3linqNhrkyvXl_m1vezlWah_6NrLj12s9flxgEl69yRA_OxQqaf4aWD-T-Hi-L3zuZgMRU-7w7IXiTtLtBnxTVbnILk/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:left;
padding-left:18px;
padding-right:18px;}
#menubar li{
float:left;
position:static;
width:auto}
#menubar li ul,#menubar ul li{
width:170px}
#menubar ul li a{
text-align:left;
color:#666;
font-size:11px;
font-weight:400;
font-family:Arial;
border:none;
padding:5px 10px}
#menubar li ul{
z-index:100;
position:absolute;
display:none;
background:#eee;
padding-bottom:5px;
border:1px dashed #fff;}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{
background:#A69990;
color:#666}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{
color:#3c3c3c;
background-color:transparent;
text-decoration:none}
#menubar li ul li.hr{
border-bottom:1px solid #fff;
border-top:1px solid #fff;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0}
#menubar ul a:hover{
background-color:#ccc!important;
color:#666!important;
text-decoration:none}
- Paste code itu di :
- Template Designer : paste di atas code ]]></b:skin>
- Classic Template : paste di atas code </style>
Sekarang steps untuk meletakkan menu navigasi-nya.
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trigger'>Admin</a>
<ul>
<li><a href='http://ramadhana-liya.blogspot.com' target='new'>Profile</a></li>
<li><a href='http://flavors.me/ramadhanliya' target='new'>Flavors</a></li>
</ul>
</li>
<li><a href='http://kaimjaebum.blogspot.com' target='new'>Bias</a></li>
<li><a class='trigger'>Exchange</a>
<ul>
<li><a href='http://ramadhanliyabuddies.blogspot.com' target='new'>Link (open)</a></li>
<li><a href='http://ramadhanliyasbanner.blogspot.com' target='new'>Banner (closed)</a></li>
</ul>
</li>
<li><a class='trigger'>Tutobies</a>
<ul>
<li><a href='http://rayastuff.blogspot.com/2013/07/tutorial.html'>Tutorial</a></li>
<li><a href='http://rayastuff.blogspot.com/2013/07/freebies.html'>Freebies</a></li>
</ul>
</li>
<li><a class='trigger'>Random</a>
<ul>
<li><a href='http://ramadhan-liya.blogspot.com/search/label/curcol'>Curcol</a></li>
</ul>
</li>
<li><a class='trigger'>Karya</a>
<ul>
<li><a href='http://joinmeyah.blogspot.com'>List Novel</a></li>
<li><a href='http://karyaliya.blogspot.com'>Read Novel</a></li>
</ul>
</li>
<li><a class='trigger'>Contact</a>
<ul>
<li><a href='http://twitter.com/ramadhan_liya' target='new'>Twitter</a></li>
<li><a href='http://ramadhanliya.tumblr.com/' target='new'>Tumblr</a></li>
</ul>
</li>
<li><a href='http://blogskins.com/me/ramadhan_liya' target='new'>Blogskin</a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=5277088314139247048' target='new'>Follow</a></li>
</ul>
</div></div>
- Paste code ini di :
- Untuk meletakkan di atas body, di bawah header (like min) : paste di atas code <div id='content-wrapper'>
- Atau di bawah code </header>
- Untuk Classic Template, paste di bawah code header.
- Preview
- Save
Note
Hijau : ganti dengan url dan menu beserta submenu kehendakmu
Biru : sesuaikan lebar dan tingginya. Usahakan sesuai juga dengan header dan body blogmu.
Ask me if u not understand~
cr : duniashida
