Cara Membuat Menu Navigasi Dengan Animasi

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><!-- end header-wrapper -->

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