nGe Hank

Banyak trik yang bisa kita gunakan untuk memodifikasi tampilan tab menu navigator horizontal pada template blogger. Kalau tidak salah sudah ada tiga pembahasan dengan category tersebeut pada blog ini,  yang pertama cara membuat menu tab navigator horizontal sederhana, selanjutnya 30 widget tab navigator horizontal, dan sebelum postingan ini multi level drop down menu using JQuery.

InsyaAllah pada postingan kali ini, tutorial yang ingin saya ketengahkan cara membuat glossy horizontal menu seperti screenshot diatas atau livedemo lihat pada blog saya yang lain disini 

Berikut tutorial membuat glossy horizontal menu

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB  (http://www.amatullah83.blogspot.com/) */

.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(http://sites.google.com/site/amatullah83/background/menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;   
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Untuk image bisa sobat ganti sesuaikan dengan template blogger sobat, contoh image lainnya yang bisa sobat gunakan:

Silahkan upload dulu ya image diatas ketempat hosting masing-masing. Oke lanjut...

3. Terakhir tambahkan kode HTML berikut diatas <div id=header-wrapper>

<ul class="glossymenu">
    <li class="current"><a href="http://www.amatullah83.blogspot.com/"><b>Home</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam/"><b>Agama</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Teknologi/"><b>Teknologi</b></a></li>   
    <li><a href="http://amatullah83.blogspot.com/search/label/Kesehatan"><b>Kesehatan</b></a></li>   
    <li><a href="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger/"><b>Tutorial Bogger</b></a></li>   
    <li><a href="http://amatullah83.blogspot.com/search/label/Widget"><b>Blogger Widgets</b></a></li>   
</ul>

Silahkan sobat edit link dan anchor teks kode HTML diatas

4. Simpan tempalate.

Mudah bukan? Selamat mencoba, semoga bermanfaat! Jangan lupa komentar!!!

Thanks to Dinamic Drive