Cara Membuat Menu Navigasi Dengan Animasi

Selasa, 13 November 2012

Cara Membuat Menu Navigasi Dengan Animasi

JQuery - Tampaknya menu navigasi ini sangat keren, dengan animasi pastinya nambah keren lagi. Kamu bisa menerapkan ini di blog dengan mudah, namun Anda tidak boleh edit CSS kode nya agar berhasil. Menu ini saya dapatkan dari www.devirtuoso.com.

Cara Pertama:

1. Login ke blog kamu.

2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/* Div Wrapper */
#menuBar{
/* Hide text that goes beyond
the bottom of the wrapper */
overflow:hidden;

/* Give wrapper background image */
width:503px;
height:102px;
background: transparent url(https://lh5.googleusercontent.com/-35weoKqLCtI/UGLffqVYtiI/AAAAAAAAFnU/UBy-L4-5kuM/s503/bar.jpg) no-repeat scroll left top;

/* Center menu on page and give it a border */
margin:0 auto;
border:10px solid #111;
}
#menuBar ul{
/* Center menu inside wrapper */
width:380px;
margin:0 auto;

/* Get rid of bullets */
list-style-type: none;
}
#menuBar ul li{
/* Make menu horizontal */
float:left;

/* Add spacing between menu items */
padding-right:40px;

}
#menuBar a{

/* Give each menu item a background image */
width:55px;
height:102px;
display:block;
background: transparent url(https://lh5.googleusercontent.com/-YQA8S8-VJGo/UGLfktfY-UI/AAAAAAAAFnc/kslfGZTu63s/s503/logos.jpg) no-repeat scroll left top;
/* Push text down below bottom of wrapper*/
padding-top:100px;

/* Beautify Text*/
color:#ddd;
font-family: Arial, "MS Trebuchet", sans-serif;
text-decoration: none;
font-size:10pt;
font-weight:bold;
outline:none;
}

#menuBar a:hover{
/* change background image for rollover state */
background-image:url(https://lh6.googleusercontent.com/-J3e-zxNABXQ/UGLfpr_RZkI/AAAAAAAAFnk/4DORq-4EOHw/s503/logos-over.jpg);
}

/* Position each background image accordingly
to display icons */
#menuBar a#Home{
background-position:-67px top;
}
#menuBar a#About{
background-position:-166px top;
}
#menuBar a#Gallery{
background-position:-266px top;
}
#menuBar a#Contact{
background-position:-373px top;
}
</style>
<div id="menuBar">
<ul>
<li><a href="ADD URL BLOG KAMU" id="Home">Home</a></li>
<li><a href="ADD URL" id="About">About</a></li>
<li><a href="ADD URL" id="Gallery">Gallery</a></li>
<li><a href="ADD URL" id="Contact">Contact</a></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("a").mouseover(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"78px"}, 100);
}).mouseout(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"100px"}, 100);
});
});
</script>

3. Simpan.

Cara Kedua (Gunakan cara ini jika cara pertama gagal atau ada kekacauan):
1. Login ke blog kamu.
2. Pilih Template > Edit HTML.
3. Dan sekarang jika kamu ingin meletakannya di bawah header, kamu cari kode bagian header blog kamu, biasanya kaya gini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Untuk mempermudah mencari nya cukup cari kode <div id='header-wrapper'>
Dan kode yang berwarna biru adalah akhir kode bagian header suatu blog.

4. Setelah sobat menemukan kode di atas letakan kode nomor 2 pada Cara Pertama tepat di bawah kode yang berwarna biru. Jangan langsung disimpan, klik dulu pertinjauan apakah berhasil tidak, kalau berhasil baru simpan.

Mungkin yang anda cari :

blog