Cara Membuat Menu Dropdown Warna Hijau di Blog
Membuat Menu Dropdown Warna Hijau di Blog - Menu Dropdown sudah banyak yang menggunakannya dan Membuatnya lebih menarik dan keren dengan berbagai warna, Untuk yang akan saya bagikan ini adalah Menu NavigasiDropdown Dengan warna latarnya Hijau dan dengan search box di sampingnya.
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 :
- 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="LINK URL"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizg2X4jmeGMqmigdNUTFJlnLsxolYDB3Xdg91CTttTis7SDC64Xkib1kfKD81pG7uLTQa8qNRGI_u2stXwXM7BosFwKBHTi-SBpPxYDcks9PltagNlr4uBPmVBPQI7S4Ijac3zI8tNXsY/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/AVvXsEjGVr1Zz-IuEbPGPGRCn_oaVSO8HrAplgWCBPMB88DaO_GTpM8TqUdBlcP0xi0omovZmW70oFQTQf3mW2BpXAIoVxTYhP61dp8fSkIIG6w9QHBiC4yTmtei37XNG2ppfvdrmwnS6EdWqMY/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" /></form></div></div>
- Ganti LINK URL 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 Bercabang Warna Hijau di Blog ,Semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di praktekan,
Semoga bermanfaat. HAPPY BLOGGING!
Sampai jumpa di artikel selanjutnya yaa.
Bagikan
Cara Membuat Menu Dropdown Bercabang Warna Hijau di Blog
4/
5
Oleh
Home Sharing
