Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog

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).
Menu Tab Horisontal Aero Glass CSS3 di Blog
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.

Berlangganan artikel via email

14 Response to "Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog"

sipp mantap tutorialnya sob, lain kali deh saya coba kalau lagi mood ngedit template :D

Balas

wah asik nih tutor cssnya

Balas

bisa bikin link blog lain ya

Balas

ane dulu pernah nerapin cara ini waktu pakai artister gan

Balas

keren nih bisa css3 tipsnya gan

Balas

Tutorial yang sangat membantu sekali sobat, khususnya bagi saya untuk menambah pengetahuan soal css ini. terima kasih banyak sudah berbagi sobat

Balas

keren mas, yahoot pokonya tutorial luar biasa, terimakasih banyak sudah berbagi

Balas

hasilnya jadi keren gan :)

Balas

Bagus sekali mas, boleh nish dicoba tutorialnya...

Balas

met malam mas andes....mampir sekalian baca tutornya yang supr keren hehehe
trims ya mas :)

Balas
avatar
Anonymous

Keren tampilannya.. dan cara pasangnya juga mudah ndak perlu masuk dan edit html.. tinggal tempel dan save.
Oke banget mas !

Balas

mantap gan, makasih kode css nya

Balas

Kren abis sob, lam knal yah

Balas

keren soba tutornya sangat membantu sekali,,,trimakasih sudah berbagi

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode