Menu horizontal

Posted by : Stiker Jalingkut


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1gbfgFU8Ss9mDB9MEirDC4b5J_cbzGJl9923T5BF6QbAN2JpLj0BwWbVgtr5iUM6r5zg4VQNP_5iyyR2Lk8Yh4E7axMw7wbaNFKMqcqtzgWWaXBhYTAl-xBB7jIxzjOLAXxOX1C1tsMd/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

{ 17 comentários... read them below or Comment }

  1. Kang Muroi4 April 2013 pukul 23.58

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

    BalasHapus
  2. vlog media news5 April 2013 pukul 00.18

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

    BalasHapus
    Balasan
    1. Stiker Jalingkut5 April 2013 pukul 04.32

      iya sob pasangnya bisa sambil minum kopi tubruk heheh

      Hapus
  3. Stiker Jalingkut5 April 2013 pukul 04.35

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

    BalasHapus
  4. Boby Ramadhan5 April 2013 pukul 05.10

    keren nih sob, boleh dicoba menunya, pke CSS Ya?

    BalasHapus
  5. zigzoor5 April 2013 pukul 07.00

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

    BalasHapus
  6. Djangkaru Bumi5 April 2013 pukul 07.12

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

    BalasHapus
  7. kk ps5 April 2013 pukul 09.29

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

    BalasHapus
  8. Problem Child5 April 2013 pukul 14.06

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

    BalasHapus
  9. Masnady5 April 2013 pukul 17.48

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

    BalasHapus
  10. Unknown5 April 2013 pukul 18.12

    Udah ada sobat :)

    BalasHapus
  11. Penghuni 605 April 2013 pukul 21.39

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

    BalasHapus
  12. Rohis Facebook5 April 2013 pukul 22.57

    linknya bisa goyang dangdut ya mas hehehe..

    BalasHapus
  13. SC5 April 2013 pukul 23.03

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

    BalasHapus
  14. Boku no Blog6 April 2013 pukul 02.34

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

- Copyright © TUTORIAL™ - Blogger Templates - Powered by Blogger - Designed by Sella -