Cara Membuat Menu Horizontal Animasi Di blog

Aduh Senangnya Berbagi Pengetahuan Ya?

Kembali Lagi Dengan saya "Last Ari Stevand"

Kali Ini Saya Akan Bahas Tentang Membuat Menu Horizontal Animasi Pada blog.

Blog Kita Tidak akan Banyak Pengunjung jika Kita tidak Mempercantiknya Dengan berbagai Pernak Pernik Blog.

Okeylah Langsung Aja Caranya Ya,,,,,,, 

 

Langkah Pertama :

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

Cara Membuat Kotak Polos

.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(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.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(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/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;
}

• Lalu Simpan Template.
• Langkah Kedua Tambah Gadget HTML Javascript Lalu Copy Paste Script  dibawah ini

<div class="animatedtabs">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>

<li class="selected"><a href="#" title="Menu"><span>Menu</span></a></li>

<li><a href="#" title="Profil"><span>Profil</span></a></li>

<li><a href="#" title="Contact"><span>Contact</span></a></li>


<li><a href="#" title="Tools"><span>Tools</span></a></li>

<li><a href="#" title="HTML"><span>HMTL</span></a></li>

</ul>
</div>

Keterangan :
Tanda # adalah Alamat Link Yang DI tuju.

Pada kata title dan juga Home Dan Yang Lain Lain Itu Adalah Menu Dengan Sesuai Kebutuhan Blog Anda.

Sekian Dan Terima Kasih

"Commentar Anda sangat Penting Demi Kemajuan Blog Ini"