Drop Down Menu Navigation Dengan Efek Bounce

Drop Down Menu Navigation Dengan Efek Bounce. Setelah sempat beberapa hari ini disibukkan dengan rutinitas yang begitu padat seperti tugas kuliah dan kegiatan yang lainnya yang tak bisa saya tinggalkan yang mana saya membuat saya tidak dapat membuat artikel baru lagi untuk diposting.

Drop Down Menu Navigation Dengan Efek Bounce

Nah, berhubung sekarang saya memiliki waktu luang, maka saya akan share lagi tutorial blogging yang terbaru nih, yakni Drop Down Menu Navigation Dengan Efek Bounce yang mana postingan kali ini masih ada hubungannya dengan tutorial yang sebelumnya yakni 32 Macam Menu Navigation Horizontal.

Berikut ini cara membuat Drop Down Menu Navigation Dengan Efek Bounce.

1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand template widget.
4. Cari code di bawah ini. Tekan Ctrl+F untuk mempermudah pencarian.

]]></b:skin>

5. Setelah ketemu, copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

/*Navigation*/
.menu {
font:normal 12px arial;
line-height:normal;
text-transform:none;
color:#FFF;
text-decoration:none;
margin:0;
padding:3px 0
}
.menu ul {background:#000;
background-image: linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -o-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -moz-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -ms-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(148,0,0)),
    color-stop(0.6, rgb(0,0,0))
);
height:35px;
line-height:30px;
-webkit-box-shadow:0 1px 5px #fff;
-moz-box-shadow:0 1px 5px #fff;
box-shadow:0 1px 5px #fff;
margin:0;
padding:0
}
.menu li {
list-style:none;
color:#FFF;
float:left;
display:inline;
position:relative;
margin:0;
padding:0
}
.menu li a {
display:block;
border-left:1px solid #444;
border-right:1px solid #222;
color:#FFF;
text-decoration:none;
font-weight:700;
line-height:30px;
outline:none;
margin:0;
padding:2px 15px
}
.menu li ul {
position:absolute;
z-index:10;
left:0;
top:100%;
height:auto;
width:170px;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
margin:0;
padding:0
}
.menu li ul a {
border-left:none;
border-right:none;
border-top:1px solid #444;
border-bottom:1px solid #222;
display:block
}
.menu li ul li {
float:none;
display:block;
width:auto
}
.menu li ul ul {
top:0;
left:100%
}
.menu li a:focus {
background-color:#666;
border-left-color:#777;
border-right-color:#555
}
.menu ul li a:focus {
background-color:#666;
border-top-color:#777;
border-bottom-color:#555
}
.menu li a:hover,.menu ul li a:hover {
color:#ccc;
background:#000
}

6. Kemudian cari code di bawah ini, Tekan Ctrl+F untuk mempermudah pencarian.

</head>

7. Setelah ketemu copy paste kode di bawah ini dan letakkan di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='
http://hompimpa.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $(&#39;.menu li&#39;).hover(function() {
        $(this).children(&#39;ul&#39;).filter(&#39;:not(:animated)&#39;).slideDown(700,&#39;easeOutBounce&#39;);
    }, function() {
        $(this).children(&#39;ul&#39;).slideUp(400);
    });
});
</script>

8. Setelah itu kembali ke dashboard » Pilih Tata letak » Tambah gadget » Html/JavaScrip. Dan copy paste code di bawah ini.

<div class='menu'>
<ul>

<li><a href='/'><img border='0' src='http://2.bp.blogspot.com/-L0B8lAHpkhs/TyFxgeNjmbI/AAAAAAAAExM/PV-i3c8jvA4/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a class='' href='/'>Home</a></li>
<li><a href='
http://junedalbughisy.blogspot.com/2012/03/biodataku.html' target='_blank'>About me</a></li>
<li><a class='arrow' href='#'>Contact me</a>
<ul>
<li><a href='
https://plus.google.com/100968599480471308297' target='_blank'>Goggle +</a></li>
<li class='hr'/>
<li><a href='
https://www.facebook.com/juned.abdullah' target='_blank'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='
https://twitter.com/#!/junedalbughisy' target='_blank'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='
http://junedalbughisy.blogspot.com/2012/04/daftar-isi.html' target='_blank'>Daftar isi</a></li>
<li><a href='
http://junedalbughisy.blogspot.com/2012/04/tips-dan-trik-blogging.html' target='_blank'>Tips dan trik bloging</a></li>
<li><a href='
http://junedalbughisy.blogspot.com/2012/03/cerita-lucu-terbaru-2012.html' target='_blank'>Cerita lucu</a></li>
<li><a href='
http://junedalbughisy.blogspot.com/search/label/Kesehatan' target='_blank'>Kesehatan</a></li>
<li><a href='
http://junedalbughisy.blogspot.com/search/label/Internet' target='_blank'>Internet</a></li>
</ul>

</div> 

Catatan:

  • Silahkan ganti tulisan yang berwarna biru dengan URL yang sobat inginkan.
  • Silahkan ganti tulisan yang berwarna merah dengan tulisan yang sobat inginkan.

9.  Dan yang terkahir simpan/save template.

Semoga tutorial kali ini bermanfaat Happy blogging ^_^

Junedalbughisy.blogspot.com|referensi: http://arimjie.blogspot.com/2012/05/drop-down-navigation-menu-with-bounce.html

8 komentar:

  1. Tutorialnya keren mas.... thanks :-q

    BalasHapus
  2. saya pengen buat juga di blog wp saya soalnya menunya tidak berjalan otomatis saat saya menambahkan halaman page baru, kira2 kalau di pakai untuk blog wordpress apa bisa juga ya script diatas ?
    terima kasih

    BalasHapus
  3. @Jefry dicoba aja dulu mas... setahu saya bisa... v lo gak bisa mas bisa cara tutorial lainya yang berkaitan dengan blog wordpress :)

    BalasHapus
  4. kerenn gan,, thx infonya .,,.
    knjungi blik ya..

    BalasHapus
  5. Makasih banget gan ..
    http://www.cute-factor.com/images/smilies/onion/th_059_.gif

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top