Cara Membuat Navbar Menu Menggulung

Selamat malam semua kawan Blogger yang setia berkunjung di Blog saya ini :z; sebelumnya saya pernah berbagi dengan kawan Cara Membuat Navbar Menu Bertingkat dan Cara Membuat Navbar Menu Bertingkat ke-2 karena sekarang saya akan tetap berbagi tentang Navbar Menu yang saya dapat dari jalan-jalan [Blogwalking] pada Blog senior kita DTE dengan Nama rocking rolling rounded menu, :q; tapi disini setelah saya adakan perubahan sedikit supaya sesuai selera saya tentunya dan mudah-mudahan cocok juga dengan selera kawan yang saya beri Nama Navbar Menu Menggulung :y;

Untuk Demo kawan bisa lihat pada Header sebelah kanan   

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari </b:skin> 
• Setelah ketemu Copas script berikut diatasnya

#Navmenu-menggulung {width:auto;height:38px; text-align:left; font-family:"Trebuchet MS",sans-serif; font-size:16px; font-style:normal;  font-weight:bold;  text-transform:uppercase; }
#Navmenu-menggulung h2, #Navmenu-menggulung p, #Navmenu-menggulung form {  /* netralisasi tampilan elemen heading, paragraf dan formulir */   margin:0 0 0 0; pading:0 0 0 0; border:none;  background:transparent; }
#Navmenu-menggulung .item { position:relative; background-color:#f0f0f0; float:right; width:38px;  margin:0px 5px;  height:38px;  border:2px solid #999;  -webkit-border-radius:30px;  -moz-border-radius:30px;  -webkit-border-radius:30px;   -webkit-box-shadow:1px 1px 3px #555; -moz-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden;}
#Navmenu-menggulung .link { left:0px;  top:0px; position:absolute; width:38px;  height:38px; }
#Navmenu-menggulung .icon_beranda   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPJEoOr6OWJ0GGZJ0chVYc1mPpYVsvD4L3gzThbaeKadftfhdCkLgVpvQEQIld3w_E7nA5xA258NJphmdYP6p3vqOueGF_mwctHlsy7aTZkG1eUuvHOi2or5BDz4CpbWoXtXxXrbIEyCgm/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4X5tO95BOzpLeIjcp8LArcw0HtB5AB5CUqqTxOID50bR_BZfk_byosqyUHPSAo8k9v_AkqsYER8oaQqX_3UhXLjP4OB4w-rlUCFXH_Ofa375_x7LU6npF1bEAYPgUipBLhvYUVym0rQny/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO4krC4K04OVt_ZvrFiFbc0HeRqfSABSSv_AU3adbhndloki1AVp4DxQO2ilifMrplRHzSF7LFHseh_jgwG-XjuNxqz22prcRh0AFXprtkWGLSHWKaIHr-GhM9IKwu8cpUtDwA21wJdgYw/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEy4CBs1FmZSeFkFDfNP8wn7vHnxsHFMbu6gu8lkxrpB_d1jyMGa1iczlWR_s7ueJ7jsYK6OqX2OgskQXDShiffLRPxhrxJkoQcYjmSLRaGnsoxokcoCqNmQnOcUpUaSpvgFM3a324sQI/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjfeJeDNmqT3ZwxH7NE8gYoWQFaSChdjd9Us6zfgBWjL2-tYbIQIxe18_nFD4ZFf8pO1w-D6MypT2ZJHsomthSnqAYn6VlatyAxu4oq1TsmmafYDipunCTkedVIZE8Fw7Uz6pb59nRXxZ/s1600/Daftar+Isi.png) no-repeat top left;}
#Navmenu-menggulung .item_content {  position:absolute;  height:38px; width:220px; overflow:hidden; left:44px; top:4px;   background:transparent; display:none;}
#Navmenu-menggulung .item_content h2 { color:#999; text-shadow:1px 1px 1px #fff; background-color:transparent; font-size:16px; }
#Navmenu-menggulung .item_content a { background-color:transparent; float:left; margin-right:7px; margin-top:4px; color:#999; text-decoration:none; font-size:18px;}
#Navmenu-menggulung .item_content a:hover {color:#CCC;text-shadow:1px 1px 1px #000;}
#Navmenu-menggulung .item_content p { background-color:transparent; text-transform:none; font-weight:normal !important; display:none; }
#Navmenu-menggulung .item_content p input { border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px;  -webkit-box-shadow:none;  -moz-box-shadow:none;  box-shadow:none; }

• Simpan Template kawan
• Selanjutnya kawan pilih Tata Letak - Tambah Gadget - HTML / JavaSceipt 
• Copas script berikut kedalamnya

<div id='Navmenu-menggulung'>
<div class='item'>
        <a class='link icon_cari'/>  <div class='item_content'> <h2><div id='search'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
            </form></div></h2> </div> </div>
 <div class='item'>
        <a class='link icon_test'/> <div class='item_content'> <h2><a href='https://developers.google.com/speed/pagespeed/insights'>TEST BLOG</a></h2> </div>  </div>
    <div class='item'>
        <a class='link icon_kontak'/>  <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/2012/01/contact-us.html' target='_blank'> KONTAK BBC </a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_daftar'/> <div class='item_content'>  <h2><a href='http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html' target='_blank'>DAFTAR ISI</a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_beranda'/> <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/'>BERANDA</a></h2>  </div> </div>
    <div style='clear:both;'/> </div>
<script type='text/javascript'>
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=40deg&#39;},0)},10);a.stop().animate({width:&#39;38px&#39;},1e3).find(&#39;.item_content&#39;).stop(true,true).fadeOut().find(&#39;p&#39;).stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=-40deg&#39;},0)},10);a.stop().animate({width:&#39;178px&#39;},1e3).find(&#39;.item_content&#39;).fadeIn(400,function(){$(this).find(&#39;p&#39;).stop(true,true).fadeIn(600)})}$(&#39;.item&#39;).hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)});
</script>
</div></div> 

• Silahkan ganti teks yang saya beri warna merah dengan Link / URL kawan
• Kawan bisa juga menyimpan script Pemanggil ini di samping header / Sidebar atau sesuai selera kawan yang penting sebelum <body/>
• Eheheh lupa, ingat simpan Template kawan

Berbagi Artikel :

Cara Membuat Navbar Menu Menggulung

blog, Blog Bego, tips trik, widget,

Rate this posting:

{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Navbar Menu Menggulung
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---