Menu Horizontal Animasi untuk Blog

Kali ini kita akan mempelajari cara membuat menu horisontal animasi.lihat di sini

Langsung aja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin> (biar cepat lo tekan ctrl+f dan lo tulis kata apa yg mao di cari di dalam kotak find: di bawah jendela browser.)
    .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;
    }

  4. Tambahkan kode HTML berikut diatas atau dibawah <div id=’header-wrapper’> kalo di tempale gue sih di bawah atw di atas tag <header> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class=’animatedtabs’>
    <ul>
    <li><a href=’http://creatingwebsite-maskolis.blogspot.com&#8217; 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&#8217; title=’SEO’><span>SEO</span></a></li>
    <li><a href=’http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress&#8217; title=’wordpress’><span>Wordpress</span></a></li>
    <li><a href=’http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate&#8217; title=’affiliate’><span>Affiliate</span></a></li> 
    <li><a href=’http://creatingwebsite-maskolis.blogspot.com/search/label/hosting&#8217; title=’hosting’><span>Hosting</span></a></li>
    </ul>

    </div>

  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, mohon maklum kalau tulisannya ada yang salah namanya juga newbie hehe. selamat mencoba.
Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s