Membuat Menu Horisontal Dengan Animasi

Setelah berlama-lama di internet sambil minum kopi kepikir dalam benak saya gimana sih cara membuat menu halaman yang manis, enak di lihat dan paling tidak memberi kesan profesional bagi blog saya. E...eh akhirnya saya nyasar di blognya Mas Amatullah dimana beliau membahas tentang apa yang saya inginkan dan akhirnya saya praktikkan langsung dan jadi dah!! coba di lihat di atas header Sasak Blogger ini disana terdapat menu horisontal yang dilengkapi dengan animasi, gimana manis bukan he...he...!!!

Dalam postingan ini saya ingin juga membahasnya karena mungkin ada juga para blogger pemula seperti saya yang mencari informasi yang sama. Ya!! mudahan Mas Amatullah nggak keberatan postingannya saya bahas kembali. Buat Mas Amatullah postingan materi ini semata-mata saya posting sebagai bahan buat referensi saya dan juga referensi bagi anak didik saya di SMAN 1 Praya yang kepingin belajar lebih mendalam tentang dunia blogger.

Tanpa basa-basi lagi yuk kita mulai membuatnya.
Pertama-tama kita harus masuk atau login dulu ke blog kita kemudian setelah itu pilih Rancangan Blog / Tata Letak Blog lalu klik Edit HTML
Cari kode ]]></b:skin>:
Tambahkan kode berikut ini di atas kode ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4PIxbkNjgIScmKIim1X655ai-ewP1o2nUogj2Z6CmXK2QsgprJXo6CYNtDmniggDiogTyU2ep6EPyMfcqVeSHlVurnrA4QmxsWYDq6OPO2j1XBl-zxjygRX3-Yr6colekzxQjVtElmc/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/AVvXsEjRB00OGTDwPOtvKZCSnJxedlwDWfT5M6b4-Ff9wHsvgtBFv3xuhVMsxt8Xx-W7j_F8NEnu0dd9QGYQRhJB86CE3O9lliemX6I7fD5NFjNSAr3t5itBKxXFmrjmvG9XzKa9rk-PpJH_Zk8/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;
}

Simpan template

Ei...t belum selesai bos, setelah kita simpan selanjutnya kita Klik Elemen Halaman, dimana Menu Horisontal Animasi ini kita akan buat sebagai widgetnya.

Setelah Klik Elemen Halaman, Klik Tambahkan HTML/JavaScript. Setelah itu copy dan paste kode di bawah ini :

<div class='animatedtabs'>
<ul>
<li><a href='http://www.amatullah83.blogspot.com' title='Home'><span>Home</span></a></li>
<li class='selected'><a href='http://amatullah83.blogspot.com/search/label/Widget' title='Blogger Widgets'><span>Widgets</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Modifikasi%20Tab%20Menu' title='Modifikasi Tab Menu'><span>Modifikasi Tab Menu</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Variasi%20Icons' title='Variasi Icons'><span>Variasi Icons</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Background' title='Background'><span>Background</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Blogger%20Templates' title='Free Blogger Templates'><span>Blogger Templates </span></a></li>
</ul>
</div>

Selesai dah dan coba lihat hasilnya.

Oke sampai disini dulu lain waktu kita sambung lagi tutorialnya ok!!

Tertarik dengan postingan ini?, Saya akan sangat berterima kasih apabila anda berkenan mereview postingan ini di

Postingan Terkait