Rabu, 06 November 2013

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/AVvXsEhYWQeVXFzdL2mw_KsKgIQ31QMy702e4_FnKeMAOTjdHSJ2-lh_gyQOfeD14nhQwOB7Mn_Y6xdfx7V3IJ6uEK6nmI5_B-bitGlJNRpPYecthadsXBXTX7dBG1EKqDMuRVcVgtonXLGRSthx/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikYurJNgoywVSrGrPR7PPb2E9tW8free5Y3KKoIiYEuUcSCyFLViS4_xgphsCzao9PbZUuOpNxiS8QPn0DaXFgyQzw41_Dl1UWcuJkzz7C4-eg2oKlP8KGKKGoL3d-y2Ggm7O7pJeCwNYh/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOmgHlpk1gwd76PzLmjhbQuiBhfLozn5uPO1nZ4Bg6qHT-swgT6c0nJGgXNt7vb1X6UXSYKXqUy8-J1MVKcoFI_xApTiaeRXpLLv5Cu6r7aAwxfbeHq0pAiky4DLqryQcQ85YDC_4fPDS/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmGshzlIviPJW-WPus51ycMlzfYTLP4i2e-A0KQ4eGBBr-81Yi8MlsjnJBA0Er3pnVqiCnFLuSvYTEuQkuYlzYGRPl8xawKZaTyQZvgBgDQ2TOA6GuAP5ECbMC8Hj1sbfEKDfhv5z7j4/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFeEK2i-tVOGraTFgFboAyzp3Scw8M1WobnxJzxkit4gDdUeF6Ku_BLYXWfiCs3zb2OW7A3B3ZTGjH9kjkJgswvYGGTmTB43b1tBsZEqoJy8zqeJI2S7A_MX9tt4IF5a-UT-l2IOZaw_P/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://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://blogspot.com/2012/01/site-map-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://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



Tidak ada komentar:

Posting Komentar