Pada saat sobat membuat sebuah blog, tentunya banyak hal yang harus kita lakukan agar tampilan blog sobat menjadi lebih baik dan menarik dan tentunya akan memudahkan pengunjung ketika berkunjung ke blog sobat. Nah, salah satu hal penting dalam penataan blog adalah adanya menubar, dimana menubar merupakan sebuah strip horizontal yang berisi daftar menu yang tersedia untuk program atau halaman tertentu.
Pada kesempatan kali ini, bizznet ingin berbagi pengalaman tentang bagaimana caranya membuat sebuat menubar yang dilengkapi juga dengan sebuah kotak pencarian pada sisi kanan menubar dengan menggunakan script HTML.
Secara umum untuk melakukan kustomisasi halaman blog, yang harus sobat lakukan yaitu:
Login ke akun blogger sobat
Kemudian pada panel board klik Desain
Pilih template dan klik tombol Edit HTML
Jangan lupa klik juga Expand Template Widget
Saran: sebaiknya backup dulu template sobat semua untuk berjaga-jaga apabila terjadi kesalahan pada penambahan script.
Pada deretan kode HTML template sobat cari salah satu script berikut :
<div class='main-outer'> atauUntuk memudahkan gunakan fitur Ctrl+F untuk mempercepat pencarian. Pada template yang saya gunakan, saya menggunakan kode <div class='main-outer'>, jadi kodenya bisa saja berbeda dengan template yang lain.
<div id='main-wrapper'> atau
<div id='main'>
Setelah ketemu, copykan kode dibawah dan letakan diatas salah satu kode yang sudah anda cari tadi. Misalkan: kodenya <div class='main-outer'> maka letakan kode dibawah ini tepat diatas tulisan <div class='main-outer'>.
Setelah langkah diatas selesai, kemudian sobat tekan kembali Ctrl+F dan cari kode
/* warna background Menubar + Searchbar */
#cat-nav {background:#000000;margin:0 15px;padding:0;height:35px;}
/* warna font seleksi */
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #ffffff;}
/* warna font main seleksi*/
#cat-nav a:hover { color:#fff; }
/* warna main seleksi */
#cat-nav li:hover { background:#ff0000; }
/* warna font sub seleksi */
#cat-nav a span { font-family:Verdana, "Geneva, sans-serif", sans-serif, serif;; font-size:11px; font-style:bold; font-weight:400; color:#000;}
#cat-nav .nav-description { display:block;}
/* warna font sub seleksi */
#cat-nav a:hover span { color:#000; }
/* warna background sub seleksi */
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#000000; }
#secnav a { font-family:Verdana, "Geneva, sans-serif", sans-serif, serif; font-style:normal; font-weight:700; font-size:12px; 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; }
/* warna font sub seleksi */
#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:#fff; }
#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://blogkamu.blogspot.co.id'>Menu 1</a>
</li><li>
<a href='http://blogkamu.blogspot.co.id'>Menu 2</a>
</li><li>
<a href='#'>Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 3</a></li>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 3</a></li>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 3</a></li>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 3</a></li></ul></li>
<li><a href='#'>Menu 4</a>
<ul id='sub-custom-nav'>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 4</a></li>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 4</a></li></ul></li>
<li><a href='#'>Menu 5</a>
<ul id='sub-custom-nav'>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 5</a></li>
<li><a href='http://blogkamu.blogspot.co.id'>Sub Menu 5</a></li></ul></li>
<li><a href='http://blogkamu.blogspot.co.id'>Menu 6</a></li></ul>
/* Kotak pencari */
<div id='#searchbox-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhym04ROi7InCdw9CtUe-c2atYh4DsRNFRdijZ4m1fp2QRtTuzdRgvxiuUyryJDRlWTl3I2INFWDKk35WRGDzWUdH7ZLRXk1uTw5NDkCxbvndPRrxixpG0dAxXFgqFclOI-Qa5tycZUExc/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:3px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
]]></b:skin>
Kalau sudah ketemu, letakkan kode dibawah ini tepat diatas tulisan ]]></b:skin>.
Sekarang coba sobat preview hasil penambahan kode diatas, bagaimana sobat apakah sudah berhasil?
#searchbox-right{
float:right;
width:170px;
padding-top:6px;
padding-right:20px
}
#search{
border:2px solid #1E90FF;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:2px solid #1E90FF;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}
}
Selanjutnya bagaimana cara mengedit nama menubar sesuai dengan keinginan sobat. Caranya adalah sobat tinggal merubah tulisan yang berwarna pada kode diatas.
Tulisan warna merah untuk mengedit nama atau label menu
Tulisan warna hijau untuk mengedit alamat URL
Selain itu, sobat juga dapat merubah warna background menubar, warna font dan warna background submenu melalui code yang diberi warna pink dan yang terdapat penjelasan seperti:
/* warna background Menubar + Searchbar */
/* warna font seleksi */
/* warna font main seleksi*/
/* warna main seleksi */
/* warna font sub seleksi */
/* warna font sub seleksi */
/* warna background sub seleksi */
Dan inilah hasil akhirnya. OK, Selamat mencoba..
No comments :