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....

22 Komentar pada : “Cara Membuat Navbar Menu Menggulung”

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

      Hapus
    2. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













      saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI

      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
  15. Mantab Abiezzz :e;
    Bagus Bagus Bagus

    BalasHapus
  16. wow keren Gan...lumayan tambah ngilmu nih...
    Terimakasih and Sukses Selalu

    BalasHapus
  17. Di coba apa salahnya..
    Oke brow :e;

    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