Seperti yang kita ketahui menu navigasi, berguna untuk mempermudah pengunjung untuk lebih jauh menjelajahin blog tersebut, Sebelum itu dibawah ini beberapa artikel yang berhubungan denganMenu Navigasi, Dan Untuk Cara Pembuatan menu dropdown ini tutorialnya seperti di bawah ini :
Artikel Lainnya Tentang Menu Navigasi :
- Login Ke Blogger.com, Dengan Akun Anda
- Setelah Berada dii Dasbor Blogger, Sekarang Klik ''Template''
- Terus Klik ''Edit HTML''
- Setelah itu, Cari Kode ]]></b:skin, Terus Paste kode di bawah ini, dan taruhlah di atas/sebelum kode ]]></b:skin
/* The CSS3 Code */
.btrix-greenymenu{width:950px;background: #7cae15;color:#eee;text-shadow: 1px 1px 1px #495505;display:inline-block;-moz-box-shadow: 3px 3px 4px #007308;
-webkit-box-shadow: 3px 3px 4px #007308;box-shadow: 3px 3px 4px #007308;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu ul{width:950px;padding:0;margin:0 auto}
.btrix-greenymenu li:first-child a{padding:7px 10px 3px}
.btrix-greenymenu li{list-style:none;display:inline-block;float:left}
.btrix-greenymenu li a{background:url(http://1.bp.blogspot.com/-4OIAjD0uSN0/UR1FWgJm2YI/AAAAAAAAAJk/H-ajqHe53Ic/s1600/sprite.png) right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding: 8px 15px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu li a:hover{background:#333;color:#fff;text-shadow: 1px 1px 1px #000;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
.btrix-greenymenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.btrix-greenymenu li li a,.btrix-greenymenu li li a:link,.btrix-greenymenu li li a:visited{background:#439700;border-bottom:1px solid #000;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.btrix-greenymenu li li a:hover,.btrix-greenymenu li li a:active{background:#444}
.btrix-greenymenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.btrix-greenymenu li ul a{width:140px}
.btrix-greenymenu li ul ul{margin:-33px 0 0 157px}
.btrix-greenymenu li:hover>ul,.btrix-greenymenu li.sfHover ul{left:auto}
.menusearch{width:200px;float:right;margin:0 auto;padding:5px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
- Setelah selesai, Klik Simpan
Cara Pemasanganya :
- Pergi Ke Menu ''Tata Letak''
- Terus atur posisinya, dan Klik ''Tambah Gadget''
- Cari Gadget ''HTML/JavaScript''
- Terus Taruh kode dibawah ini, di dalamnya
<div class="btrix-greenymenu">
<ul class="sf-menu">
<li><a href="http://gias-alauddin.blogspot.com/"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkJHOu8QMxIHySFmF-wdmK1Zx9wV0wiONR51hpTczU0ZGwxzWJkmQP5CxIx-efJRHGBs5oJ5ATFKXBdbgiRk4xg_QmPQuVEaPKR9fEMhdGI93eGgKMzWcooeE8dcE2c5WJb3CVRYWGOc/s1600/home.gif" style="padding: 0px;" /></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Drop Menu 3</a>
<ul>
<li><a href="#">Sub Drop Menu 3.1</a></li>
<li><a href="#">Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="menusearch">
<form action="/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="Search here...." />
<input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06XxEGDRNJ8huc6yTrLJJ44aC7Q5e1C3Wd3XWUQ5gziABA-HXM8HbEoB3cFmHVg7sAb6ablfUNZsujLxMKPuqEFw7W3KEgWGwkBifawEbboww5xYdu1DdnaqIhdNwlLofua8XoKdPQgk/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" />
</form>
</div>
</div>
- Ganti http://gias-alauddin.blogspot.com Dengan Url Blog Sobat
- Ganti juga # dengan url yang ingin dituju
- Setelah semua di ubah, sesuai keinginan sobat
- Sekarang Klik Simpan
Demikianlah artikel dan tutorial tentang
Membuat Menu Dropdown Warna Hijau di Blog ,Semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di pratekin, Silakan tinggalkan Komentar sobat tentang artikel ini di kolom komentar dibawah ini.
Terima Kasih....
