468x60 Ads

Cara Membuat Navbar Menu Menggulung

Unknown | 08:27 | , , ,
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/AVvXsEgXUKFF40KvrAQorVo8hhrL8T3U3FLFT2q8r1f_rN7pUXfK8w39ONgRM3evDXcIk023_eDbzZlluTGN4aBaKKTykN7Dj9WgYUYNK5NhVXyphlHbXAvl89_XW5PN9-iIxOWyNtMXBhganGO6/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-e4L4lNPp3Y3LvU2e5Ps-OpHKUotRSCzsi-gX6PihqpdMLJGkiTV3W_nm4aeB577eFUw7GuGCVnaXfmMD5QJISx81GXQiQaREwLHHJlvtvXejHk2DAeym4BNnHynnJ0dlkIiuA_zh1FC/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2vb8Tx8EiF1y9hXhjXAH6ajMljz5gvzHVR5VqqF4SeUg3bXnLWjAk9AdrVfJ7VOClF4SQRE6mFO9NdBtiJ_Ahyphenhyphen_w60L2xv3E8JvFEOhdGF2HGqT434cASni8TmvumVcBxnEdciF9fT5p/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsEPiNKcrDJ_mcYm7J8MRzWOAH1PsvER3TZEUab4sqeLd8t9YrDcMSuDqZpIKgTt7K92jMuy-uO3eozTlbzvZPGHimigNNNPisZWgfprIHZQ9dha-9jDtv2uA-dgJIgK6dCxX49OMdnc/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1iTxX1PTb1-NEhs9kBvLKdq4qGgHSyKWYq-UGiGvMgb3sDV9i4sFuUiv5YFkZXZK4s72DOnHi13TQWXa0Qu6RyZQ7_j9aqpYCMCC8m4TeHf9IgfYw5ZXQpj8C3lipjO01i9yBPuWJWIz/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


0 Kommentare:

Kommentar veröffentlichen