Membuat Tab Menu Menggunakan CSS3 Di Blog

Contoh tab menu menggunakan CSS3 bisa anda lihat pada gambar di atas. Jika tertarik, berikut langkah - langkah pembuatannya.

• Login ke akun Blogger Anda.
• Klik Rancangan > Edit HTML.
• Klik Download Template Lengkap untuk mem-backup template. Ini penting dilakukan untuk jaga - jaga misalkan fitur yang akan kita pasang berikutnya tidak sesuai dengan yang kita inginkan
• Cari kode ]]></b:skin>, gunakan tombol Ctrl + F atau tekan F3 saja agar lebih cepat ditemukan
• Setelah ketemu, paste kode berikut tepat di atas kode ]]></b:skin>

/*****Tab menu css3 72 Bidadari *****/
.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 220px;
position: relative;
top: 0px;
left: 0px;
padding: 0px 0 0px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_VBTkhMh1BBo2RArqlbXx-CehpMvhN4g6ceIfAjkLL5nhOt_I1-TKEwYA-Vxlv6coWG7-AJqa24g3MjnNxm8JbqO5KL0q4gUbbJSgY3uPuWFxuvGptSJFMVJWhyphenhyphenFhjtV0i7Y3PdYpBg/s320/shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
}

li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
background: #FFFF00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J3OIx5-lOr6xKd3HN-fcfReojlbUZ7SnveH0O22iVyD-WvTo_R-kEvN6d_iRQWjCpAadVgVCdp8d7Z4gKLQnAvVKBaon3XAToXhSRVGlKbZszKOhlGJ5Ba2WCf1vV7EpweYy05CpO7k/s320/batas.png) no-repeat;
color: #000000;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;

width: 110px;
display: block;
text-decoration: none;
-webkit-box-shadow: 4px 2px 4px #888;
-moz-box-shadow: 4px 2px 4px #888;
}

ul.nav li a:hover {
background: #FAAC58 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J3OIx5-lOr6xKd3HN-fcfReojlbUZ7SnveH0O22iVyD-WvTo_R-kEvN6d_iRQWjCpAadVgVCdp8d7Z4gKLQnAvVKBaon3XAToXhSRVGlKbZszKOhlGJ5Ba2WCf1vV7EpweYy05CpO7k/s320/batas.png) no-repeat;
color: black;
padding: 7px 15px 7px 30px;
}


Untuk memodifikasi tab menu, lihat tulisan berwarna di atas.

#FFFF00 adalah background dari tab menu
#000000 adalah warna teks dalam tab menu
#FAAC58 adalah warna saat tab menu disorot dengan kursor.

Seperti contoh gambar di samping, background tab menu adalah kuning, teks tab menu berwarna hitam, dan saat disorot dengan kursor menjadi berwarna orange. Anda bisa merubah sendiri kode - kode HTML dengan melihat kode - kode warna HTML yang ada di blog ini.

Setelah itu klik Simpan Template.

• Eh belum selesai, selanjutnya klik Elemen Laman
• Klik Tambah Gadget, pilih Add HTML/Javascript
• Masukkan kode berikut ke dalam kotak yang disediakan.

<div class="navbox">
<ul class="nav">
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
<li><a href="masukan link">Judul Menu</a></li>
</ul>
</div>

• Tulisan yang warna biru adalah link menu yang harus dimasukkan, misalnya http://72bidadari.blogspot.com/, tulisan berwarna merah adalah judul dari menu. Jika menu di atas terlalu banyak atau terlalu sedikit, bisa ditambahkan atau dikurangi.
• Yang terakhir, klik simpan. 

Semoga bermanfaat

Sumber