Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog

Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog – berbeda dengan tab menu pada tutorial yang sebelumnya, karena pada sebelumnya dominan dengan warna gelap maka sekarang gilirannya untuk tab menu sederhana dengan tema warna yang terang.
Tab menu horisontal ini sangat simple dan tidak memerlukan banyak waktu saat menerapkannya kedalam blog, efisien dan ringkas tentunya. Apabila ingin disesuaikan kembali maka tidak ada salahnya jika sedikit merubah kode-kode CSS yang ada. Semisal jika terdapat warna kurang sesuai atau efek hover pada tab menu horisontal ini tidak pas dengan warna template blog bisa di ganti dengan warna lain yang mungkin bisa serasi template blog sebelumnya. Mungkin tutorial menu ini tidak sebaik dari tutorial menu sebelumnya, tapi apa daya jika mungkin ada yang tertarik untuk menerapkan kedalam blognya. Untuk memasangnya, maka berikut adalah tutorial cara Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

div.bottombar{
height: 5px;
background: #1a1109;
}

ul.aeroglass{
font: bold 14px Georgia ;
width: 100%;
background: #b1e958;
padding: 5px 0 5px 0;
margin: 0;  
text-align: left;
}

ul.aeroglass li{
display: inline;
}

ul.aeroglass li a{
color:black;
padding: 6px 8px 6px 8px;
margin-right: 15px;
text-decoration: none;
}

ul.aeroglass li a:hover, ul.aeroglass li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 6px;
padding-bottom: 12px
}

3. Klik Terapkan ke Blog.

Selanjutnya untuk memanggil dan menampilkan Menu Tab Horisontal Aero Glass CSS3 di Blog caranya copy kode dibawah ini, kemudian klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode ini didalamnya:

<ul class="aeroglass">
<li><a href="http://mas-andes.blogspot.com/" class="selected">Home</a></li>
<li><a href="http://mas-andes.blogspot.com/">CSS</a></li>
<li><a href="http://mas-andes.blogspot.com/">Javascript</a></li>
<li><a href="http://mas-andes.blogspot.com/">jQuery</a></li>
<li><a href="http://mas-andes.blogspot.com/">Tutorial</a></li>
<li><a href="http://mas-andes.blogspot.com/">SEO</a></li>
</ul>
<div class="bottombar"></div>

Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan URL tujuan.
Silahkan ubah tulisan yang berwarna biru dengan judul menu.

Langkah terakhir klik Save, maka selesai dan lihat hasilnya dari cara Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog.