Header Ads

ad

Menu horizontal


Apa kabar sobat kayak nya hari-hari ini jarang sobat yang bikin postingan,ni
yadah kali ini kami mau berbagi Cara Casang Menu horizontal
mungkin Menu horizontal sudah banyak yang tau sobat semu
jadi kami gak banyak Cerita heheheh.

Perhatikan gambar di bawah itu gambar hasil nantinya genk 




 
Silakan buat sobat yang mau pasang ikuti langkah-langkah di bawah
1. Login ke Blogger
2. Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode </b:skin>, tambahkan kode di bawah pastekan diatasnya :

  • #page-wrap{ width: 300px; margin: 20px auto; } a{ text-decoration: none; } ul{ list-style: none; } .box { background:-moz-linear-gradient(top, #FF6600, #000000);border-right:2px solid #FF6600;border-bottom:1px solid #FF6600;border-top:1px solid #00FFFF;border-left:1pxsolid #00FFFF;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0 0 3px #FFFF00; padding: 10px; margin: 0 0 15px 0; } .box ul li { font-size: 13px; margin: 0; border-bottom: 1px solid #666; } .box ul li a{ color:#00FFFF; display: block; padding: 4px 4px; margin: 0; border-bottom: 1px solid #ccc; } .box ul li:last-child, .box ul li:last-child a{ border: none; } .box ul li a:hover{ background:-moz-linear-gradient(top, #000099, #000000);border-right:2px solid #FF6600;border-bottom:1px solid #FF6600;border-top:1px solid #00FFFF;border-left:1pxsolid #00FFFF;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0 0 3px #FFFF00; text-decoration: none; } #catNav { background:-moz-linear-gradient(top, #000099, #000000);border-right:2px solid #FF6600;border-bottom:1px solid #FF6600;border-top:1px solid #00FFFF;border-left:1pxsolid #00FFFF;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0 0 3px #FFFF00; padding: 5px 5px 5px 37px; -moz-border-radius: 5px; -webkit-border-radius: 5px;overflow: hidden; margin: 0 0 10px 0; } #catNav li{ display: inline; } #catNav li a{ display: block; width: 50px; height: 50px; text-indent: -9999px; background: url(http://1.bp.blogspot.com/-CCsaBgM0Nco/UV5WIWB9UJI/AAAAAAAAHLs/j1d1V23VHRg/s1600/Lakon.png); float: left;border: none; padding: 0; } #catNav li a#list-one-button{ background-position: -50px -50px; } #page-wrap #catNav li.activeCatButton a#list-one-button { background-position: -50px -100px; } #catNav li a#list-one-button:hover { background-position: -50px 0px; } #catNav a#list-two-button { background:-moz-linear-gradient(top, #FF6600, #000000): -100px -50px; } #page-wrap #catNav li.activeCatButton a#list-two-button { background-position: -100px -100px; } #catNav li a#list-two-button:hover { background-position: -100px 0px; } #catNav a#list-three-button{ background-position: 0px -50px; } #page-wrap #catNav li.activeCatButton a#list-three-button { background-position: 0px -100px; } #catNav li a#list-three-button:hover { background-position: 0px 0px; } #catNav a#list-four-button { background-position: -150px -50px; } #page-wrap #catNav li.activeCatButton a#list-four-button { background-position: -150px -100px; } #catNav li a#list-four-button:hover { background-position: -150px 0px; }
 
Kalu langkah di atas sudah sobat Cari Code  </head>
Kalu sudah ketemu masukan code javascript di Atas Code </head>


Buat pemasangan menunya Code Div atau Html nya di bawah


Sekian dulu dari kami sobat semoga bermanfaat

18 komentar:

  1. keren gan, tak bungkus dulu yah scriptnya..ngopi..ngopi..

    BalasHapus
    Balasan
    1. s8ilakan kang di kopi dan di minum heheh

      Hapus
  2. Mantab genk menu horizontal nya dan cukup sederhana cara pasangnya... Sambil minum kopi terus di coba ilmu tutorialnya,

    BalasHapus
    Balasan
    1. iya sob pasangnya bisa sambil minum kopi tubruk heheh

      Hapus
  3. bang cara buat RSU sama Daftar Isi tapi ada gambarnya gmn si bang?

    Blz ya banggg

    BalasHapus
    Balasan
    1. coba buka URL ini sob http://www.bloggertutoria.com/2013/02/cara-mudah-bikin-daftar-isi-di-samping.html

      Hapus
  4. keren nih sob, boleh dicoba menunya, pke CSS Ya?

    BalasHapus
    Balasan
    1. iya sob pake Css trmksih kunjungannya sobat

      Hapus
  5. saya nggak bisa lihat gambarnya,kayaknya jaringan inetnya lagi ngadat kang,nanti kembali lagi unuk melihat gambar demonya ya sob.

    BalasHapus
  6. Hanya bisa menyimak, semoga lain waktu bisa menerapkan. Terimakasih atas sharingnya.

    BalasHapus
  7. Malam mas b0ss ..seperti biasa script nya saya amankan dulu,jika di perlukan bisa langsung d pasang.nuhun!!!

    BalasHapus
  8. Wah, keren nih sob. Saya test dulu di blog demo. . .

    BalasHapus
  9. wah keren sob menunya, ada fotonya lagi hehehe. ijin simpan dulu dech...

    BalasHapus
  10. gi males utak atik script nih sob, nyimak aja deh...

    BalasHapus
  11. linknya bisa goyang dangdut ya mas hehehe..

    BalasHapus
  12. menarik untuk dipasang...
    tak simpan dulu ya gan... :)

    BalasHapus
  13. Nyimak postingannya ya Sob, terimakasih tutornya, lanjutkan..

    BalasHapus

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

Diberdayakan oleh Blogger.