Membuat Menu Horizontal Animasi di Blog By Maskolis

Seperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. 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 abu-abu padat;
   overflow: hidden;
   width: 100%;
   font-size: 14px; / * Font menu text * /
   }
   .animatedtabs ul {
   list-style-type: none;
   margin: 0;
   margin-left: 10px; / * Offset tab pertama relatif terhadap halaman kiri tepi * /
   padding: 0;
   }
   .animatedtabs li {
   mengapung: kiri;
   margin: 0;
   padding: 0;
   }
   .animatedtabs a {
   mengapung: kiri;
   position: relative;
   top: 5px; / * 1) Jumlah piksel untuk menonjol untuk tab yang dipilih. Harus sama (3) MINUS (2) di bawah * /
   background: tidak mengulang-kiri atas;
   margin: 0;
   margin-right: 3px; / * Jarak antara masing-masing tab * /
   padding: 0 0 0 9px;
   text-decoration: none;
   }
   .animatedtabs rentang {
   mengapung: kiri;
   position: relative;
   display: block;
   background: no-ulangi kanan atas;
   padding: 5px 14px 5px 3px; / * 2) Padding dalam setiap tab. Nilai 3, atau 3px, harus sama (1) MINUS (3) * /
   font-weight: bold;
   warna: hitam;
   }
   / * Komentar Backslash Hack menyembunyikan aturan dari IE5-Mac \ * /
   .animatedtabs rentang {float: none;}
   / * End IE5-Mac hack * /
   .animatedtabs .selected a {
   background-position: 0 -125px;
   top: 0;
   }
   .animatedtabs .selected rentang {
   background-position: 100% -125px;
   warna: hitam;
   padding-bottom: 8px; / * 3) bantalan Bawah tab yang dipilih. Harus sama (1) PLUS (2) di atas * /
   top: 0;
   }
   .animatedtabs a: hover {
   background-position: 0% -125px;
   top: 0;
   }
   .animatedtabs a: hover {rentang
   background-position: 100% -125px;
   padding-bottom: 8px; / * 3) bantalan Bawah tab yang dipilih. Harus sama (1) PLUS (2) di atas * /
   top: 0;
   }
4. 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> </ li>

   <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'> <span> Tutorial Blog </ span> </ li >

   <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'> <span> SEO </ div> </a> </ li>

   <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'> <span> Wordpress </ span> </ li>

   <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'> <span> Afiliasi </ span> </ li> 

   <Li> <a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'> <span> Hosting </ span> </ li>

   </ Ul>

   </ Div>

5. Simpan template dan lihat hasilnya.

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