Cara Membuatt 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.
Langsung saja untuk langkah-langkahnya di bawah ini.
1. Masuk blogger.com
2. 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.