Cara Membuat Menu Horizontal Feat Gold

Ngemengin masalah menu, eh maksudnya ngomongin masalah menu emang gak ada habisnya itu sih menurut saya, gak tau kalo menurut sobat.
Memasang menu di blog emang sangatlah penting, dan juga bisa di bilang tanpa adanya menu maka blog kita kurang keren, atau juga tanpa menu pengunjung juga akan kebingungan.
Kemarin blog O.W atau Oto Website pernah membahas tentang menu blog di antaranya:
Cara Membuat Menu Top Di Atas Header
Membuat Menu Tab View Di Blog
Cara Membuat Menu Drop Down di Bawah Header
Cara Membuat Menu Horizontal Melayang
dan sekarang blog ini akan membahas tentang Cara Membuat Menu Horizontal Feat Gold. menu horizontal ini keren sob untuk contohnya sobat bisa lihat di gambar( sory gambarnya gak begitu menarik atau suram karna saya menggunakan blog yang satunya).

O iya mudah-mudahan postingan atau articles atau apalah namanya, yah pokoknya mudah-mudahan postingan Cara Membuat Menu Horizontal Feat Gold dapat membantu teman yang kemarin bertanya, walaupun saya sendiri masih kurang paham maksudnya!

Contoh Menu Horizontal Feat Gold

Gambar di atas adalah contoh Menu Horizontal Feat Gold, sobat bisa memasangnya di atas atau di bawah header sekaligus, dan untuk warnaya bisa sobat sesuaiakan sendiri dengan keinginan sobat sendiri.

Kita lansung aja ya bahas Cara Membuat Menu Horizontal Feat Gold:

1. Masuk ke akun bloggger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget ➨ Download dulu templatenya untuk mengantisipasi bila terjadi kesalahan.


3. Selanjutnya sobat di dalam Edit Template sobat cari kode ]]></b:skin> jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.

4. Jika sudah ketemu letakkan kode berikut di atas kode ]]></b:skin>

#tejahtc{-moz-border-radius: 0x;height:33px; width:975px; margin:0 auto; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal;} #tejas{ margin: 0px; padding: 0px; width:970px;height:33px;width:auto;background:#111;border-left:5px solid #FFCC00;border-right:5px solid #FFCC00;border-bottom:5px solid #C5B200;border-top:5px solid #C5B200;} #tejas ul { float: left; list-style: none; margin: 0px; padding: 0px;}

 #tejas li { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li a, #tejas li a:link, #tejas li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #tejas li a:hover, #tejas li a:active {color:#ff0000;cursor:pointer;background:#ccff00;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px;height:auto;border-left:5px solid #ccc;border-right:5px solid #ccc;}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #tejas li li a:hover, #tejas li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-J9_AZ1-Hex77BMh5UjLnKSbSzP9J38cYIXcSbHX6LShP0datmFlhMW6zvZ49o-L81j-fgfh9enLXhZqIjQG1BaHxYn7a6SqRcDMxktD9H_B0rrMhhmwaxgxTeKMxjjM07kMDQxM08AH/) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #tejas li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #tejas li li { } #tejas li ul a { width: 140px; } #tejas li ul a:hover, #tejas li ul a:active { } #tejas li ul ul { margin: -34px 0 0 170px; } #tejas li:hover ul ul, #tejas li:hover ul ul ul, #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul { left: -999em; } #tejas li:hover ul, #tejas li li:hover ul, #tejas li li li:hover ul, #tejas li.sfhover ul, #tejas li li.sfhover ul, #tejas li li li.sfhover ul { left: auto; } #tejas li:hover, #tejas li.sfhover { position: static; }

5. Masih di dalam Edit Template, sekarang sobat cari kode:

• Jika di bawah header letakkan kode di bawah ini di bawah kode <div id='content-wrapper'>
• Jika di atas header letakkan kode di bawah ini di atas kode <head>

Keterangan:
setiap template berbeda-beda jika sobat ingin meletakkan di bawah header maka sobat cari kode yang mirip dengan kode <div id='content-wrapper'>

<center>
<div id='tejahtc'>
<div id='tejas'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 1</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 2</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 3</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 4</a></li>
<li><a href='#' title='Isi Dengan Diskripsi '>Menu 5</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 6</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7</a>
<ul>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.1</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.2</a></li>
<li><a href='#' title='Isi Dengan Diskripsi'>Menu 7.3</a></li>
</ul></li>
<li><a href='http://otowebsite.blogspot.com' title='Sumber'>@otowebsite</a></li>
</ul>
</div>
</div>

<div class='clear'/>
</center>

6. Klick pertinjauan terlebih dahulu, bila sukses baru simpan.

Keterangan:

• Ganti tanda # dengan url tujuan.
• Ganti Isi Dengan Diskripsi dengan teks sobat sendiri, title adalah teks yang muncul sebelum menu di klick.
• Ganti teks Menu dengan nama menu sobat sendiri.
• Jika sobat ingin mengganti warna background, border dan sebagainya, sobat silahkan rubah, dengan merubah kode script yang pertama(kalo yang ini saya rasa tidak perlu di jelaskan, karna kalo di jelaskan akan panjang, dan pasti tentunya sobat sudah pada ngerti kan!) Untuk melihat kode warna silahkan sobat lihat di sini Kode Warna V1 - Kode Warna V2 atau Kode Warna V3.

Sedikit keterangan lagi:

• Untuk mengubah warna dan sebagainya sobat perhatikan dan sedikit rubah kode yang pertaman:
• background:#111 = kode #111 adalah warana backgrround, kalo kurang suka silahkan do rubah dengan meliahat kode warna yang saya sebutkan di atas.
• Untuk mengatur ketebalan border dan warnanya sobat cukup ubah kode: border-left:5px solid #FFCC00;border-right:5px solid #FFCC00;border-bottom:5px solid #C5B200;border-top:5px solid #C5B200 = ini adalah kode border bagian kanan,kiri,bawah dan atas, untuk merubah ketebalan cukup sobat ganti 5px sesuai ketebalan yag sobat inginkan. Untuk warna border silahkan sobat ganti kode #C5B200/#FFCC00 dengan warna sesuai selera sobat sendiri.
• Untuk mengubah font huruf sobat coba perhatikan kode: font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif itu semua adalah font huruf yang ada/muncul pada menu, silahkan sobat sendiri deh. untuk melihat font huruf sobat bisa lihat di sini Macam-Macam Jenis Font Huruf.

Di antara kode di atas masih banyak lagi yang bisa sobat rubah sesuai selera!

Oke saya rasa cukup untuk kali ini, Jika ada kesulitan silah bertanya lagi, ok!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!