Mempostingkan Tentang Cara Membuat Menu Horizontal Biasa untuk Blog/Blogger. Sebelum ke topik utama kita saya akan menjelaskan tentang menu horisontal.Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal/mendatar dan biasanya ditempatkan di bawah header. dan Fungsi dari Tutorial Blog Kali ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.
Tidak Usah panjang Lebar lagi,berikut langkah Cara Membuat Menu Horizontal Biasa dalam blog anda :
Adapun langkah-langkah membuat menu navigasi blog adalah sebagai berikut:
1. Silahkan login ke blogger dengan ID anda
2. Masuk pada Dasbor
3. Klik Rancangan
4. Kemudian Klik Edit HTML
5. Kemudian sebelum melakukan langkah selanjutnya lebih baik klik Download Template Lengkap (Antisipasi jika ada kesalahan atau ingin kembali pada blog semula)
6. Setelah di downloud template lengkap maka ceklis Expand Template Widget
7. Cari Kode kode ]]></b:skin>
8. Copy paste kode berikut persis di atas kode ]]></b:skin>
/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Ganti tulisan yang berwarna merah sesuai dengan selera anda
Lalu cari Kode yang mirip kode seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Saya sarankan Fokuskan pada kode <div id='header-wrapper'>
Jika sudah ketemu Copas code berikut persis di bawah kode yang barusan anda cari tepatnya di bawah kode </div>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://nama blog anda.blogspot.com/'>Beranda</a></li>
<li><a href='http:// ://imron2710.blogspot.com/'>Arsip Blog</a></li>
<li><a href='http:// ://imron2710.blogspot.com/'>Download</a></li>
<li><a href='http:// ://www.imron2710.blogspot.com/'>News </a></li>
<li><a href='http:// ://www.imron2710.blogspot.com/'>Lain-lain </a></li>
</ul>
</div>
</div>
<div id='navright'>
</div>
</div><!-- akhir bg_nav -->
Ganti tulisan yang berwarna Biru dengan nama Blog anda dan link/Url yang dituju
Kemudian Klik tombol SIMPAN TEMPLATE.
Selesai.
Jika merasa susah atau mungkin ribet dalam menggunakan trik diatas, maka jangan takut masih ada alternatif lain, yaitu cara membuat menu Horizontal secara instan dan ga perlu menunggu terlalu lama. Tidak hanya bisa membuat menu Horisontal, disinipun kita bisa membuat menu Vertikal beserta sub menunya, dan kerennya lagi bisa milih2 gaya/style suka2 kita. Biar gak kelamaan, langsung aja kunjungi web: Accessify.com
