echopediaboy tips dan trik blogspot

Senin, 05 November 2012

Cara Membuat Menu Navigasi Animasi Pada Blog


 
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 ]]>
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(http://4.bp.blogspot.com/_5yyQgf23Pco/S3HSwpU-xNI/AAAAAAAABdg/Vdkjbv3OG0w/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(http://3.bp.blogspot.com/_5yyQgf23Pco/S3HS0jX5ZkI/AAAAAAAABdo/9PmCN6mZfmw/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)


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)

Comments
0 Comments

0 komentar:

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Hosted Desktops