34 Glossy Horizontal Menu

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

menu tab navigasi horizontal

View Demo

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:

image

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


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

34 komentar :

  1. salam sobat,
    saya suka yang ini sob, nampak menarik ya.

    terima kasih, semoga sukses selalu

    BalasHapus
  2. Terimakasih sharing ilmunya mba, Makin tambah saja ilmu saya dengan mengikuti tutorial dari mba admin.

    BalasHapus
  3. bagus nih menunya... tutorialnya mantapppp... tambah ilmu lagi nih...

    BalasHapus
  4. wow ilmu baru lagi..
    thanks yah, sukses selalu^^

    salam blogger :D

    BalasHapus
  5. selalau ada ilmu baru kalau berkunjung kesini.
    makasih banyak, salam taksim.

    BalasHapus
  6. wah, keren tapi tab navigator tuh apa ya? gaptek nih

    BalasHapus
  7. Ternyata byk ilmu yg saya dpt disini, gak nyesel deh dulu bisa nyasar ke sini... :)
    sukses ya..

    BalasHapus
  8. bisa ganti2, biar gak bosan...
    makasih tutorialnya mba.

    BalasHapus
  9. tutorial yg sangat bermanfaat.
    TFS ukhti.

    BalasHapus
  10. Terimakasih, saya mau coba.
    Have a nice San Valentin day.
    Salam

    BalasHapus
  11. Tutorialnya mantap nih.. kebetulan punyaku dah pakai ..

    BalasHapus
  12. Mampir lagi deh buat baca2 tutorialnya ukhti.. asyik2 nih

    BalasHapus
  13. terima kasih tutorialnya...sangat sangat membantu buat amatiran seperti saya

    BalasHapus
  14. blog ini berat banget loadingnya..

    BalasHapus
  15. @ Ali: Tergantung koneksi stp orang jg. Terimakasih komentarnya mngkn kdpn bisa sy pertimbangkan lagi u/ngepres widget blog bagi yang kenoksinya lemot.

    BalasHapus
  16. Maaf ini masih masal sputar copas...tutor ini sdh sy ketahui dari dulu n nemu di blognya hendri k bejo http://klepeut.blogspot.com/ n http://aladdingrup.blogspot.com/ mgkin isi scripnya sama tp bahasanya beda dgn menggunakn bhs sendiri nah yg jadi masalah klo kita masukan smbr link seperti artikel ini yaitu dinamic drive apakah website tersebut penemu scrip tersebut.....jadi mnrt sy masalah smbr link jangan terlalu di masalahkan krn akan membuat arogansi seorang blogger dan rasa saling memiliki artikel pdhal tutor tersebut bersifat umum dan sdh banyak di ketahui oleh org dan smbr utamanya tdk terlalu jls..intinya ngasih smbr link g pa2 g juga jgn terlalu di permasalahkan..

    BalasHapus
  17. @ Blog Pengembara: Credit scrip ini dari http://webdesigninfo.wordpress.com. Sedang http://dinamicdrive.com memposting kembali kode CSS dan HTML tab menu ini untuk web site. Dan saya memposting kembali untuk diterapkan pada template blogger.

    Tidak berarti ada blogger yang sudah memposting anda mengatakan ini copas. Silahkan cek di tool untuk mendeteksi artikel copas, apa saya mmg copas dari blog itu?

    Mau anda sebenarnya apa? Jangan permalukan diri anda sendiri dengan komentar spam. Beradablah dalam berkomentar. Komentar anda dibaca oleh stp pengunjung.

    Bersikaplah jujur, g' usah terlalu berbelit-belit ngelesnya tuk melakukan pembenaran diri. brsikap ksatria jauh lebih baik, dari pada harus menyingkap kekurangan dengan banyak kata yang sebenarnya muaranya cuman satu...

    BalasHapus
  18. Tutor ini ada juga di blognya http://koleksi-osi.blogspot.com/2009/11/cara-membuat-menu-navigasi-di-bawah.html yg di posting tgl 20-11-2009 apakah blog ini penemu scrip tersebut atau hanya menulis ulang dengan bahasanya sendiri tp isi scripnya sama....kita tidak tau kan...dan sebelumnya sy mohon masalah sumber link jangan terlalu dipermasalahkan dan dibesar2kan kecuali artikel trsbt mempunyai hak cipta yg di tandatangani pengacara khi khi khi ono2 wae ....

    BalasHapus
  19. thnks y infonya...
    salam knal y :)

    BalasHapus
  20. wow tampilannya menarik nih. Kalau saya sudah punya horizontal menu, bagaimana menghapusnya dan menggantikannya dengan horizontal menu seperti ini ?

    BalasHapus
  21. @ Blog Pengembara: Khan sudah dijelaskan diatas? Apa tidak baca?

    Yang membesar-besarkan sebenarnya siapa?

    @ U_Umar: Terimakasih apresiasinya.

    @ 100 dofollow blog indonesia: Untuk menghapusnya cari kode CSS navbar menu dan kode HTMLx. Setelah ketemu silahkan hapus dan untuk menggantinya silahkan ikuti tutorial diatas. kalau masih ada kesulitan, silahkantanyakan kembali!

    BalasHapus
  22. salam sahabat
    wah bagus perlu di coba sis thnxs n good luck ya

    BalasHapus
  23. Sebagai rasa terima kasih aku mau berbagi link dgn 3 buah blogku yg PR 3, link anda akan kuletakkan ke tiganya tanpa harus dilink balik ke 3 blog tsb, jadi oneway link, mau

    BalasHapus
  24. @ Dhana: Silahkan, mg berhasil. Terimakasih apresiasinya.

    @ Link: Oke, terimakasih.

    BalasHapus
  25. untuk author name linknya km buat dengan nama "kianhome" aja..thank's da comment yah..

    BalasHapus
  26. Maksudnya anchor teks dari link ya? Oke stlh syarat terpenuhi ya?! Maaf, klu tdk silahkan hapus link sy.

    BalasHapus
  27. oooooooooooooooooh gitu tah caranya
    amampir yah mabk...
    heheheh
    http://zona-ketawa-kita.blogspot.com/

    BalasHapus
  28. helo hello
    saya kiriman nya kak yuda
    XD

    di coba dulu yah mbak..
    >,<

    semoga berhasil
    amin

    salam dari blogger abnormal

    BalasHapus
  29. Ok gan Nice Tutor,hasilnya sangat memuaskan,..

    BalasHapus
  30. Dah Saya pke tips ini di kedua blog ku dan hasilnya sangat2 memuaskan Mba,..
    Sekali lagi terima kasih,..
    Klo Mba Ada waktu Silahkan berkunjung ke blog pemula Seperti coecha ini,..hehehe
    dan mungkin coercha juga Butuh bingbingannya,..
    Di tunggu ke datanganya di,..
    www.coercha.co.cc

    BalasHapus
  31. thanks atas segala infonya...
    moga bermanfaat buat semuanya

    BalasHapus
  32. bermanfaat sekali untuk saya yang baru belajar and moga nanti bisa bermanfaat pula utk anak-anak kami. Terimakasih ilmunya and terus berkarya buat orang banyak

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!