Music Info: Membuat Widget Menu Navigasi Blogspot

Setelah saya mencoba berbagai resep pembuatan menu navigasai yang banyak berkeliaran di internet, akhirnya saya menemukan kombinasi yang unik, awalnya saya juga agak bingung karena saya juga masih terlalu awam dalam dunia pengkodean, hehe.... namun karena ini terlalu mudah (sungguh terlalu!!!) , jadi saya sedikit banyak mengerti tentang cara-caranya, yaitu membuat widget menu navigasi yang di pojok kanannya terdapat search tool yang indah.

berikut penampakannya:

Cantik bukan? hehehe....

Mudah ko, begini caranya... seperti biasa jika kita hendak mengedit blog kita, terlebih dulu masuk ke Design, edit HTML, kemudian cek list pada kolom Expand Widget Templates.

Setelah itu cari kode ]]></b:skin>, gunakanlah fungsi search yang ada pada browser untuk memudahkan pencarian dan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

/*
==================================================

Tabs6

Author : Christopher Ware
URL : http://www.exploding-boy.com

==================================================
*/

#tabs6 {
float:left;width:100%;
background:#efefef;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}

#tabs6 ul {
margin:0;padding:10px 10px 0 5px;
list-style:none;
}

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

#tabs6 a {
float:left;
background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;
margin:0;padding:0 0 0 4px;text-decoration:none;
}

#tabs6 a span {
float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#fff;
font-weight:bold;
}

/* Commented backslah Hack hides rule from IE5-Mac \*/

#tabs6 a span {
float:none;
}
/* End IE5-Mac hack */

#tabs6 a:hover span {
color:#C2FB77;
}

#tabs6 a:hover {
background-position:0% -42px;
}

#tabs6 a:hover span {
background-position:100% -42px;
}

#tabs6 #current a {
background-position:0% -42px;
}

#tabs6 #current a span {
background-position:100% -42px;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh13vetPOpK3OXoSZ2jBbedVZCVUiCKvhcQQKJ0r9a1_ZLKcksohQZnB1xjBKOpbVYPhROUKDKce5VvvvWXtvTJBfZQbKQFtcLRXuilwIGCEL1nWBC7nL2Oogeeu7hu_llR4ov7yFgxIRBo/) no-repeat left top;
width: 180px;
height: 12px;
color: #202020;
font-size: 10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
}

Setelah itu coba di preview, jika benar maka template sudah bisa kembali disimpan.

Sekarang masuk ke Page Elements, tambahkan Gadget di posisi yang kita kehendaki, di sini kita sengaja membuat menu navigasi, maka widget yang kita pilih adalah yang berada di daerah sekitar menu atau daerah header blog, pilih Add a Widget, lalu pilih HTML/JavaScript.

Masukkan kode di bawah ini ke dalam widget yang baru saja dibuat

<div id='tabs6'>
<ul>
<li><a href="http://marielfeather.blogspot.com/" title=""><font color=black><span><b>Home</b></span></font></a></li>
<li><a href="http://marielfeather.blogspot.com/p/summary.html" title=""><font color=black><span><b>Summary</b></span></font></a></li>
<li><a href="http://marielfeather.blogspot.com/p/download.html" title=""><font color=black><span><b>Download</b></span></font></a></li>
<li><a href="http://marielfeather.blogspot.com/2011/04/10-ways-to-go-green-and-save-green.html" title=""><font color=black><span><b>Go Green</b></span></font></a></li>
<li><a href="http://www.blogger.com" title=""><font color=black><span><b>Support</b></span></font></a></li>
<div align="right">
<b:widget id='html30' locked='true' title='search' type='html'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "search here...";}' onfocus='if (this.value == "search here...") {this.value = ""}' type='text' value='search here...'/>
</form>
</div>
</b:includable>
</b:widget></div>
</ul>
</div>

Rubahlah kode-kode yang berwarna merah, sesuai yang sobat kehendaki, setelah itu simpan dan lihatlah, telah ada Menu Navigasi cantik yang menempel di blog kita :)

Selamat mencoba, jika terdapat kesulitan sobat bisa tanyakan melalui komentar di bawah. Dan terima kasih sobat sudah mau baca blog saya. :)