Ilmu-Nc

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
}

<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>