Membuat Menu Navigasi Animasi

Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Sebelumnya saya sudah pernah menulis tips tentang Membuat Menu Navigasi Animasi, tetapi kali ini saya akan berbagi lagi mengenai cara membuat menu horisontal animasi, seperti gambar di bawah ini:

Preview Gbr Menu Navigasi Animasi

Nah, jika sobat blogger ingin menampilkanny pada blog sobat, silahkan ikuti langkah-langkahnya seperti di bawah ini.

1. Login pastinya ke blogger.com dengan account sobat
2. Pada Dasbor blog anda, silahkan pilih Edit HTML
3. Kemudian jangan lupa Expand Template Widget
4. Cari kode ]]></b:skin> pada blog anda
5. Letakkan kode berikut ini di atas kode tadi

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIJAG_9Df6qYS9OTi6CgfTIgbn9-wAieGOzbgR4MlVg2FhheIK7fFhAEvuCiKfqiPp2Xuj_DL-NqYZciseBeT6D1uAGjNJkH8viUhyphenhyphen1SSq4XWRbPhj4-CFtOOD5hsrWw7gBpnDmyoDCY/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGj-f9IPVts8Z7qrMeITibK920C42z0wLBj0aAWx9N5Lraby4qRZGk_mVL_pw1cx8RhpEKo26A8vdQybwvcQT__vD4uInVMAjQT9KxEKejEyfT53tFN39FJZu8lBXsICBr1C4Cl6YE60/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

Kemudian tambahkan kode HTML berikut di bawah <div id='header-wrapper'> (Cari terlebih dahulu kode yang bercetak tebal)

<div class='animatedtabs'>

<ul>

<li><a href='http://www.tips-untuk-blogger.co.cc' title='Home'><span>Home</span></a></li>

<li><a href='http://www.tips-untuk-blogger.co.cc/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>

<li><a href='http://www.tips-untuk-blogger.co.cc/search/label/SEO' title='SEO'><span>SEO</span></a></li>

<li><a href='http://www.tips-untuk-blogger.co.cc/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>

<li><a href='http://www.tips-untuk-blogger.co.cc/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 

<li><a href='http://www.tips-untuk-blogger.co.cc/search/label/hosting' title='hosting'><span>Hosting</span></a></li>

</ul>

</div>

Perhatikan kode yang berwarna Merah dan Biru, silahkan ganti kode tersebut dengan kebutuhan anda.
Jika sudah selesai, silahkan Simpan Template, dan lihat perubahannya pada blog sobat. (Jkt/2012)