back to bottom

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
author

Admin :Ganteng Heheheh...?

Semuanya tergantung dari diri kita sendiri, jika memang kita mau melangkah untuk maju dan tidak mundur dengan halangan dan rintangan yang ada dihadapan kita, yakinlah semua akan terwujud.Cintailah dan terimalah diri kita dengan seluruh kekurangannya. kita harus yakin kalau kita dilahirkan untuk menjadi seorang Sukses heheh.

18 komentar

Muro'i El-Barezy 4 April 2013 23.58

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

cik awi 5 April 2013 00.18

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

Saiful Anas 5 April 2013 01.58

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

Blz ya banggg

Brebes VS Lamongan 5 April 2013 04.31

s8ilakan kang di kopi dan di minum heheh

Brebes VS Lamongan 5 April 2013 04.32

iya sob pasangnya bisa sambil minum kopi tubruk heheh

Brebes VS Lamongan 5 April 2013 04.35

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

Boby Ramadhan 5 April 2013 05.10

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

Brebes VS Lamongan 5 April 2013 05.16

iya sob pake Css trmksih kunjungannya sobat

zigzoor Thea 5 April 2013 07.00

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

Djangkaru Bumi 5 April 2013 07.12

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

Agus kompac 5 April 2013 09.29

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

Hattori Kun 5 April 2013 14.06

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

Masnady 5 April 2013 17.48

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

febriansyah haq 5 April 2013 18.12

Udah ada sobat :)

Penghuni 60 5 April 2013 21.39

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

Rohis Facebook 5 April 2013 22.57

linknya bisa goyang dangdut ya mas hehehe..

SAZLINA COMP 5 April 2013 23.03

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

Boku no Blog 6 April 2013 02.34

Nyimak postingannya ya Sob, terimakasih tutornya, lanjutkan..

Posting Komentar

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 "

Copyright © 2013. TUTORIAL™ | Template by Selladrt Design ✤| Proudly powered by Blogger ✤ |