Cara Membuat Navbar Menu Menggulung

Putu BlogBego - Kamis, 25 April 2013 - 22:27 wita
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(http://3.bp.blogspot.com/-hYnulloJxAo/UUaYOcubbyI/AAAAAAAAHJA/KwuexZXdBWo/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(http://3.bp.blogspot.com/-DG6VJ4x9L2M/UUaYRZ6pA3I/AAAAAAAAHJQ/UasXUCG8ors/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(http://1.bp.blogspot.com/-JjpqmQjosNU/UUaYSDwetjI/AAAAAAAAHJY/qMqP1VO0qqE/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(http://1.bp.blogspot.com/-b6hIyQcgLDM/UYrtbRMRgFI/AAAAAAAAHS0/_yM-slgSs2w/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(http://2.bp.blogspot.com/-Xc_HWN7j1h0/UUaYOFkdGUI/AAAAAAAAHI4/WNaBohKpzXU/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
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---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

18 Komentar pada : “Cara Membuat Navbar Menu Menggulung”

  1. Balasan
    1. trims kawan, saya masih belajar Ngeblog :r;

      Hapus
  2. KOK BLOG SAYA GA MENGGULUNG MAS.. LIATIN DONG MAS :t;

    BalasHapus
  3. .. aichhhh,, lagi bongkar^ punya sendiri nich. he..86x ..

    BalasHapus
    Balasan
    1. itulah BlogBego setelah mencoba dan berhasil baru berbagi dengan kawan :z; :y; :q;

      Hapus
  4. waow keren banget sob..langsung coba aja deh..

    BalasHapus
  5. mantap dan keren gan,... ijin praktek gan. salam kenal dari Jawa Cyber dan dirunggu juga follow backnya gan,.. Terimakasih gan.

    BalasHapus
    Balasan
    1. silahkan kawan and salam kenal kembali :q;

      Hapus
  6. mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..

    BalasHapus
  7. Langsung coba...

    Ditunggu kunjungan baliknya, Klik Disini...

    BalasHapus
  8. Mantap gann ^^
    boleh juga ne ditest :)
    Kunjung back yaa
    fauna-unik.blogspot.com

    BalasHapus
  9. makasih gan, kunjungan baliknya http://ojanslank.blogspot.com/

    BalasHapus
  10. terima kasih kak atas informasinya http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html#.Uh82Cl219dw

    BalasHapus
  11. makasih gan infonya..
    http://yusfipanic.blogspot.com/

    BalasHapus
  12. mantap gan tutorialnya, ijin praktek mas gan,... salam dari jawacyber.blogspot.com

    BalasHapus
  13. trimakasih infonya,coba dulu....

    BalasHapus
  14. Sipz, artikel ini sangat menarik..:-)

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation
Langsung di Email Kawan




»
BANNER [300x250]
Protected by Copyscape Web Copyright Protection Software
Open Cbox
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan