Jika anda memperhatikan tampilan blog, lihatlah sederetan kotak berwarna biru dengan tulisan berwarna
putih berisi daftar menu seperti; blog saya, dll, lalu jika kursor disentuhkan,
akan tergulung layar yang memuat sekian banyak judul artikel, Itulah yang
disebut dengan Menu dan Sub-Menu bar.seperti contoh gambar di bawah ini
Menu dan Sub-menu Bar sangat
dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu .
Memberi sub menu bar juga membuat Semua judul artikel bisa ditampilkan di layar
dalam satu tatapan mata; blog kita tampak lebih ilmiah, teratur, dan simpel.
Jika anda berminat memasangnya di
blog, artinya anda orang yang berfikir sistimatis dan menyukai
keteraturan.Selamat mencoba.
Langkah Pemasangan :
- Klik
Desain
- Pilih Template lalu pilih Edit HTML
- Pilih/klik Lanjutkan
- Pilih/klik Expand Template Widget
Cari scrift berikut :
<div id='main-wrapper'> atau
<div id='main'>
Agar lebih mudah, klik saja F3 pada
keyboard lalu pilh salah satu scrift diatas.
Berdasarkan pengalaman saya
setelah membolak balik informasi di www.google.com maka yang cocok adalah :
div class='main-outer'>
Bisa jadi beda dengan template yang
lain…
Setelah dapat, copas scrift berikut
tepat diatas scrift yang dicari tadi :
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;}
#cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid
#156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana,
Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400;
color:#fff; text-shadow:none;}
#cat-nav .nav-description {
display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul {
position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia,
"Times New Roman", Times, serif; font-style:italic; font-weight:700;
font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px;
text-decoration:none;}
#secnav li { float:left; width: auto;
height:35px;}
#secnav li ul { position: absolute; left: -999em; width:
200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif;
width:180px; line-height:30px; padding:0 10px; font-size:11px;
font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav
li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul {
left:-999em; }
#secnav li:hover ul, #secnav li
li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li
li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0
auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a href='#'>Menu
1</a></li>
<li><a href='#'>Menu
2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2
a</a></li>
<li><a href='#'>Sub Menu2
b</a></li>
</ul>
</li>
<li><a
href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub
Menu3a</a></li>
<li><a href='#'>Sub Menu3b
</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub
Menu4a</a></li>
<li><a href='#'>Sub Menu4b
</a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
PENJELASAN :
1. Cara memasukkan alamat URL:
Ganti tanda # (warna biru) dengan
link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang
ada pada blog anda.
2. Cara menuliskan judul menu atau
judul postingan:
Ganti Tulisan warna biru dengan nama
menu dan nama sub menu yang anda inginkan.
3. Cara merubah lebar menu: silakan cari kode:
#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode
(width:900px) di antara { dan }, sehingga menjadi :
#cat-nav
{background:#156994;width:900px;margin:015px;padding:0;height:35px;}
Angka 900px hanya sebagai contoh saja,
silakan rubah angka 900 dengan ukuran
lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.
4. Untuk mengatur tinggi menu silakan
ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau.
5. Untuk tambah atau kurangi jumlah
menu, silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) ,
jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f,
dst.
- Setelah itu klik Pratinjau dulu
untuk memastikan scrift sudah benar .
- Lalu simpanlah/save.
Saran :
* back up dulu template anda sebelum
merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah
dengan penambahan srcritf diatas.
*
Untuk menghilangkan tampilan tampilan dobel dengan Laman Utama,
- Maka ikutilah saran berikut :
- Masuk ke Menu Laman
- Lalu pilih tampilan halaman dengan
memilih "jangan tampilkan"
- Simpan setelan, maka laman utama
akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.
Blog sudah bisa dipublikasikan...
Apabila melalui cara yang saya bagikan
ini belum berhasil, coba sahabat ulangi lagi dengan sabar. jika berkali-kali
memang tidak bisa, sahabat bisa berkonsultasi
melalui komentar di bagian bawah ini.
Contoh Tampilan Skrip di Kotak HTML
blog "Dunia Jin."
Meski sudah berusaha menjelaskan
semampunya, ternyata masih banyak yang masih kebingungan memasang skrip di
kotak HTML, maka saya akan berikan contoh pemasangan yang penulis pasang di
blog milik penulis, dengan harapan pembaca menjadi paham dan tidak mumet
memikirkannya lagi.
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;}
#cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid
#156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana,
Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400;
color:#fff; text-shadow:none;}
#cat-nav .nav-description {
display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul {
position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia,
"Times New Roman", Times, serif; font-style:bold;
font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px;
line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto;
height:35px;}
#secnav li ul { position: absolute; left: -999em; width:
200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif;
width:180px; line-height:30px; padding:0 10px; font-size:11px;
font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav
li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul {
left:-999em; }
#secnav li:hover ul, #secnav li
li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover
ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0
auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a
href='http://alamarwah.blogspot.com/2014/05/tinjauan-buku-referensi-dialog-dengan-jin-muslim.html'>REFERENSI</a></li>
<li><a
href='http://alamarwah.blogspot.com/search/label/sosok'>SOSOK</a>
<ul id='sub-custom-nav'>
<li><a
href='http://alamarwah.blogspot.com/2014/05/pengertian-dan-asal-kata-jin.html'>1.Asal
Kata Jin</a></li>
<li><a
href='http://alamarwah.blogspot.com/2014/05/hakikat-keberadaan-jin-dan-cara-menyikapinya-yang-benar.html'>2.Keberadaan
Jin</a></li>
<li><a href='http://alamarwah.blogspot.com/2014/06/iblis-jin-bukan-dari-golongan-malaikat.html'>3.Jin
Bukan Malaikat</a></li>
</ul>
</li>
........................................................dst.
<li><a
href='http://rezahanyaiseng.blogspot.com.html'>DAFTAR ISI</a></li>
</ul>
</div>
<div
class='main-oute
maka setelah scrip di pasang dengan benar nantinya akan menjadi tampilan yg rapi seperti contoh gambar blog saya ini
demikian tutorial cara membuat menu horizontal pada blog,mudah bukan selamat mencoba
Terima kasih
No comments:
Post a Comment