Membuat Horizontal Menu

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:

membuat_horizontal_menu

atau sebagai contoh horizontal menu yang asli dan bisa di klik, kunjungilah blog ini

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:


.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}


.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}


.menuhorisontal li{
display: inline;
margin: 0;
}


.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}


.menuhorisontal li a:visited{
color: white;
}


.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}


3. Kalau Sudah Cari Code dibawah Ini:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>


4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

5. Kemudian Simpan

6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:


<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://forantum.blogspot.com'>Kumpulan Tutorial Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>


ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. udah selesai lalu simpan.....

17 komentar:

  1. pertamaXX>............. nice info bro....
    salam kenal dari wisata riau

    BalasHapus
  2. haahhhaa...

    kog psting gitu-an sie.. trus kmu gk psgg??

    kan tmbah keren, klo blog kta pke ittu

    BalasHapus
  3. bisa g, buat halaman dinamis,, kya halaman di wordpress,,

    BalasHapus
  4. Untung aku udah bjarar CSS..jadi ngerti soal ini mas..heheheh Thankzz ya mas buat tutornya...

    BalasHapus
  5. thanks ats infonya... klo yg vertikal kya smping kiri punya antum ini gmna...???
    mhon d blas sob...



    :a:

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. sukron ats semuanya ya sob.....
    saya bru bkin blog sih....




    :c:

    BalasHapus
  8. assalamu'alaikum Naufal, trimakasih atas ilmu-ilmunya, blog saya jadi salah satunya dibantu atas tutorial mas Naufal ini, selain itu juga dari Kang Rohman...

    oiya aq sudah follow d blog ini, pliz follow balik yap :)

    BalasHapus
  9. mas ni info sangat bermanfaat........
    kalau menunya horizontal trus di menu tersebut ada vertikalnya gimana??????????
    Salam AYP

    BalasHapus
  10. mass banttun sy donkk ..
    sy pgindd puny halman tukeran banner yg ky puny mass ..
    gmna cr buatnya ..??
    ajarn donkk ..
    maklum mashh awamm ...

    BalasHapus
  11. Mas bantu saya dong .
    Gmna biar tulisan gambar di komentar itu kelihatan ???
    Punya saya tidak terlihat mas tulisan nya .

    Mas bantu saya dong .
    Gmna biar template saya sebesar template mas ???
    Saya juga memakai template yang mas pakai .
    Tapi lebar nya tidak sama .
    Punya saya kecil .
    Tolong dong beri tahu saya mas pleas .

    Bisa ke fb saya reza_irawan007@rocketmail.com

    BalasHapus
  12. mas kode tersebut sama kaya blog gw,tp gw ga bisa buat SUB MENUNYA.
    Tolong liat blog gw donk tp blm berez jg cm ngatur desainnya doank.

    buat menu sub menu multi kaya yg punya mas.
    thanx....

    BalasHapus
  13. Seep, artikel yg bagus, yang kayak gini nich yang aku cari2, Thanks dan langsung permak blogku Gan.

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.