Anda ingin Membuat Menu Horizontal Pada Blog Anda? Tips ini yang di gunakan biasanya untuk lebih meminimalkan blog Anda untuk isi Artikel Anda yang terbilang sudah cukup banyak, dengan menggunakan Menu Horizontal Pada Blog, tentunya akan lebih mempermudah pembaca dalam memilih Kategori Artikel yang di inginkan sesuai dengan kebutuhan.
Cara membuat menu horizontal pada Blog
Langkah-Langkah Cara Buat Menu Horizontal Pada Blog Lebih Berfariasi
Cukup ekstra kerja keras nampaknya bagi Anda yang baru seperti saya, tapi akan saya coba beritahukan cara-caranya agar lebih mempermudah proses pembelajaran untuk tips tersebut yang telah berhasil saya lakukan. Langsung saja untuk langkah-langkahnya di bawah ini.1. Masuk blogger.com2. Pilih Rancangan ->> Edit HTML, seperti biasa download terlebih dahulu template blog Anda dan centang "Expand Widget Templates", sebelum melakukan pengeditan. 3. Cari kode tekan (Ctrl+F) untuk mencari kode seperti ini : ]]></b:skin>jika sudah di dapat copy faste kode di bawah ini tepat diatas kode ]]></b:skin>
#menu{margin:0 auto; padding:0; height:30px; width:930px; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}
#chat{position:fixed; top:25px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
4. Selanjutnya cari kode (Ctrl+F) untuk mecari kode <div id='content-wrapper'> tambahkan kode di bawah ini tepat di atas kode tersebut.
<div id='menu'>
<ul>
<li><a class='active' href='http://www.blogger.com/profile/16540147497183085501'> Profil</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi-Syairku</a>
<ul>
<li><a href='http://berbagi-kreativitas.blogspot.com/2010/06/kegagalan-bukan-akhir-dari-perjalanan.html'>Puisi Motivasi</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Persahabatan</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Cinta</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Religi</a></li>
</ul></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Materi Kuliah</a>
<ul>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Pemrograman</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com/search/label/Kumpulan%20Tugas%20Jarkom%202'>Jaringan Komputer</a></li>
</ul></li>5. Rubah atau tambahkan link yang berindentitaskan berbagi kreativitas dengan blog Anda sesuai dengan kebutuhan Artikel Blog Anda.
6. Simpan template.
Cacatan: "Untuk link gambar tombol diatas kode no urut 3 yang bercetakkan tebal rubah sesuai gambar tombol yang sesuai dengan keinginan Anda, karena link gambar tombol diatas hanya contoh dan sewaktu-waktu tidak akan berfungsi lagi. Oleh karenanya untuk menghindari hal tersebut gunakan gambar sendiri"
Semoga dapat membantu Anda untuk lebih mempermudah pengunjung ataupun pembaca yang akses blog Anda, salam.
