Membuat Menu Navigasi Horizontal Animasi di Blog - BRIGADE 86 - Cara Cepat Belajar Komputer dan Belajar Blog
Headlines News :
Powered by Blogger.
Home » , , » Membuat Menu Navigasi Horizontal Animasi di Blog

Membuat Menu Navigasi Horizontal Animasi di Blog

Written By Edie Daneva Warsono on Monday, 4 November 2013 | 23:38

Jasa Like Fanpage Murah 2014, 2015, 2016

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. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua).
Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja 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>
.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;
}



  • 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://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>

  • Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

    Related Posts Plugin for WordPress, Blogger...
    Share this article :

    1 comment:

    1. Bluehost is ultimately one of the best hosting provider for any hosting plans you need.

      ReplyDelete

    Komentar anda adalah bentuk apresiasi non verbal yang sangat berguna bagi situs ini. Tulislah beberapa kata untuk perkenalan dengan saya

     
    Original Basic Design by Absolut Website Creator Modified by Oemah Web Banjar - West Java