» » » Cara Membuat Animasi Menu Horizontal Keren Di Blog

Cara Membuat Animasi Menu Horizontal Keren Di Blog

Fullseoblog|Seorang blogger sejati biasanya selalu mengutamakan dan selalu memberikan yang terbaik pada blognya untuk menunjukkan kesan bahwa sang pemilik blog mencintai keindahan di blognya, sehingga bisa membuat nyaman para pengunjung yang berkunjung di blognya. Untuk itu saya mau share tips tentang " Cara Membuat Menu Horizontal Animasi Di Blog ".

Langsung saja, Silahkan Anda perhatikan langkah-langkah di bawah ini.

label
  1. Login ke akun blogger anda.
  2. Setelah masuk ke Dashbor >> klik Rancangan >> Edit HTML.
  3. Cari kode ]]></b:skin>
  4. Kemudian tambahkan kode CSS di bawah ini di atas kode ]]></b:skin>.

    5. .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/AVvXsEheX-D4dt-wYeHqmIFB7eHuY7rBn7jiJ0MTho5qBUOU5j1NjKSRnmt-uS2dhRYR5-4O1PpPjNoWzCcKywionksUhgUusXXwUrf0H1rKtxCuCaa2sV_fOjYMltJA1ZHj1R8MH7K_20O-0q0/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/AVvXsEhNB48CqKVzaTNOY04ViK7lNlIQJ9v7xDY9YyADu0cHIofflxGvu_gp0tGO6NUKiHbVDqtq6NsvJM599SQWpaxcQSBRbsokgRajSp_EriI98pix_Q-vi7eQwSuvhZtd-dVZi-RZjIeHg3I/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; }

  5. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget.
<div class="animatedtabs">
<ul>
<li><a href="http://www.fullseoblog.org" title="Home">Home</a></li>
<li><a href="http://www.fullseoblog.org" title="tutorial blog">Tutorial Blog</a></li>
<li><a href="http://www.fullseoblog.org" title="SEO">SEO</a></li>
<li><a href="http://www.fullseoblog.org" title="wordpress">Wordpress</a></li>
<li><a href="http://www.fullseoblog.org" title="affiliate">Affiliate</a></li>
<li><a href="http://www.fullseoblog.org" title="hosting">Hosting</a></li>
</ul>
</div>
    6. Simpan template dan lihat hasilnya.

    Catatan : ganti http://www.fullseoblog.org dengan alamat blog sobat.

    Source Code:maskolis(dot)com 
    Diposkan oleh