Headlines News :
Home » » Membuat Animasi Menu Horizontal di Blog

Membuat Animasi Menu Horizontal di Blog

Written By Muhammad Yogi Saputra on Sabtu, 29 September 2012 | 20.06

Kali ini saya akan memberikan sebuah informasi mengenai cara Membuat Animasi Menu Horizontal di Blog. Mungkin bagi anda yang ingin tampilan blog anda menjadi lebih menarik dan pengunjung pun bisa betah untuk berlama-lama berada di blog anda.  Bagi anda yang ingin melihat tampilannya secara langsung silahkan menuju kesini. Langsung aja saya kasih scriptnya :

       1. Login ke Blogger
       2. Kemudian pada Dashbor klik Template lalu Edit HTML
       3. Letakkan kode berikut diatas tag ]]></b:skin>:

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

       4. Tambahkan kode berikut dibawah <div id='header-wrapper'> atau di atasnya juga bisa, atau juga bisa anda tambahkan pada elemen widget.

 
<div class='animatedtabs'>
<ul>
<li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
</ul>
</div>

       5. Simpan template dan Lihat Hasilnya

        Mungkin hanya ini dulu ya teman-teman, cara ini juga saya dapat dari blog nya Maskolis. Jika teman-teman kebingungan silahkan tinggalkan komentar dibawah ini.
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

English French German Spain Russian Japanese Arabic Chinese Simplified

FOTO GALLERY

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. MYOGISAPUTRA | Informasi Dunia Cyber Terkini - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
Related Posts Plugin for WordPress, Blogger...