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/AVvXsEj8ojAIbt361oEhZcLYvLYlIYRVT-JTH8Y9TTXK9VMf-CqDXM4rtL9zbu3YwQuVwlf7nsHSpM_ztDEaJO1xN-1taOjIaSdYaEyQfONkmm0lng8CwDIX6Gmiv6pJUUC4mERHOt8ZqRFv5Lhq/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQci5Ex3g8iGYC28AHKguRYQ8WNIqZqbP9egcMIt_1xylL-U7nyCaIp92zNDIQIPEnKXYjtTmBQ3txO7vV5Ak8CMXvyEL_WcuF7YQnUy9sRwxp8r9VtV12qmOF2HIa9V3scdmI1c-T02NH/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUcRg1X6L4XViN-8oda3cQBA1fsThsmKBjRWudv1qQmKCyjq5jFOOE10tM2AyBoEsrwrhjliCCN-tccmZn6tp8I8CLrxE9MUR0mUJHnfrU1-bRyMyfWR5ia0siSiTsGIEa6PL-TaaNYGs/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7l4c49btUSNyC4-BF_cDJgCc3MUEaFiqH24TIQRVZAQNG0vj5RdAW5gz627iZM_lTm7NRykdvp-dxVlX8CNREWhvg9drA2Q_qy7Gif5l_ylB9mjrggIBWnhuwgqOrFWjSv7FKxQQST4/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuA9zkdBFUyRL8xbpJGHHapkf0ymohCZpaPArC7AuhkqLiaBlblhawmA6IbBt5Zll8_0_FnUBD2lHr8zj2aYedkiS_NP9QGXtOUsXpSQHOKprYJ7VqaUyQefarPh-vi8Lqex_2BNiUmBw/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