Membuat Menu dengan Animasi

Membuat Menu dengan Animasi, adalh pokok bahasan kita kali ini. Mungkin sobat bertanya-tanya kenapa yah akhir-akhir ini saya lebih sering memberikan tips membuat menu navigasi pada blog?. Memang sih akhir-akhir ini saya lebih sering memberikan tips yang sama dengan tips kali ini. Tetapi jangan salah sobat blogger, setiap tips menu navigasi yang saya berikan tidak ada yang sama, bahkan semuanya mungkin dapat memperantik blog sobat. Karena tampilan dari menu navigasi ini sangat banyak jenisnya. Mungkin jika sobat ingin bukti, silahkan kunjungi blog-blog atau situs-situs, pasti menu navigasinya akan berbeda-beda.

Nah pada tips kali ini akan saya berikan bagaimana caranya membuat menu navigasi horizontal dengan dilengkapi animasinya. Untuk lebih jelasnya silahkan lihat contohnya di bawah ini.

DEMO

Jika sobat blogger tertarik dengan tips ini, silahkan ikuti langkah-langkahnya di bawah ini. Untuk menampilkan Menu Navigasi ini teantunya anda sudah mempunyai blog di blogger atau sejenisnya.

Langkah-lngkah menampilkannya pada blog:
1. Login ke blogger dengan account anda
2. Pilih Tata Letak pada Dasbor blog anda
3. Pilih Tambah Gadget/ Add Gadget => HTML/JavaScript
4. Kemudian letakkan kode berikut ke dalam kotak HTML/JavaScript

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

5. Silahkan Simpan. Dan lihat perubahannya pada blog sobat.

Jika ada masalah dengan langkah-langa di atas, silahkan coba cara berikut ini:
a. Pilih Template => Edit HTML => Lanjutkan
b. Cari kode yang mirip dengan kode di bawah

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

Note: Kode di atas merupakan kode Header blog, kalau anda susan untuk mencarinya sialahna anda fokus pada kode <div id='header-wrapper'> dan kode yang berwarna Merah.

c. Jika susah selesai, silahkan letakkan kode pada Langkah 4 tepat di bawah kode yang berwarna Merah.
d. Simpan Template, atau Pratinjau dulu.
Semoga bermanfaan dan mohon maa jika ada kesalahan (Jkt/2012)