Membuat widget pada menu navigasi blog

Umumnya element widget untuk menempatkan gadget akan berada pada sidbar, header, footer dan lainnya. namun kali ini saya akan berbagi sebuah trik untuk membuat elemen widget pada menu navigasi yang mungkin aneh untuk apa tujuannya. sebenarnya cara ini saya gunakan untuk memasang sebuah formulir pencarian menggunakan jquery di blog ini yang mungkin nanti fungsinya bisa sama untuk sobat sebagai tempat meletakkan atau memasang gadget formulir pencarian biasa atau dengan jQuery dan untuk hasil trik ini, bisa sobat lihat pada menu floating blog ini.

Langsung saja, bagaimana caranya silahkan simak saja triknya sebagai berikut:

Langkah 1: Silahkan masuk ke Blogger dan buka blog anda, dari dashboard pilih tab Template > Edit HTML ( jang lupa, buat cadangan template anda )
Langkah 2: Sekarang kita akan membuat markup html sebuah menu navigasi untuk tempat dimana nannti kita akan meletakkan elemen widgetnya, kodenya seperti ini

<div id='contoh-menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Aboute</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
</div>

Langkah 3: Saya anggap menu diatas sudah bisa digunakan, dan sekarang kita akan melanjutkan membuat kolom elemen widgetnya, lihat kode berikut

<li>
  <div id='form-pencarian'>
  </div>
</li>

Langkah 4: Kode untuk menempatkan element widgetnya telah ada, sekerang kita letakkan elemen widget di htmlnya sehingga jadi seperti di bawah ini

<li>
  <div id='form-pencarian'>
    <b:section class='top-header secsion' id='sience' preferred='yes'/>
  </div>
</li>

Ingat: class top-header secsion pada html diatas tidak perlu diberi nilai di dalam css dan id sience hanya di gunakan untuk id unik saja, jadi biarkan class dan id ini tidak mempunyai nilai atau anda ingin memberinya gaya silahkan di modifikasi.

Langkah 5: Setelah semua langkah diatas rampung, saatnya kita menyatukan semuanya sebagai hasil akhir dan hasil dari kesemuanya adalah seperti kode berikut ini

<div id='contoh-menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Aboute</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
<li>
    <div id='form-pencarian'>
        <b:section class='top-header secsion' id='sience' preferred='yes'/>
    </div>
</li>
</ul>
</div>

Langkah 6: Sekarang langkah untuk membuat css dari menu diatas, yang perlu diperhatikan adalah setiap gadget mempunyai class quickedit ( ikon obeng dan tang ) yang muncul untuk tujuan edit cepat. untuk menyiasati ini kita tempatkan nilai css untuk menyembunyikannya seperti berikut

.quickedit{display:none;}

dan kita letakkan dalam markup <ul>,

#contoh-menu ul .quickedit{display:none;}

Maka semua css untuk menu navigasi dengan elemen widgetnya adalah seperti dibawah ini

#contoh-menu{margin-top:25px;float:right;width:100%}
#contoh-menu ul{list-style: none;}
#contoh-menu ul .quickedit{display:none;}
#contoh-menu ul li{float:right}
#contoh-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#fff;font-size:16px;text-transform:uppercase;display:block;text-decoration:none;}
#contoh-menu ul li a:hover{border-bottom:2px solid #000}
#form-pencarian a {text-decoration:none;color:#0D3E71;font-weight:bold;font-size:12px;display:block;}

Langkah 7: Untuk menggunakan menu ini, silahkan anda letakkan di bawah header atau mana saja yang anda inginkan dalam elemen htlm template anda, letakkan cssnya juga sesuai css lainnya. Silahkan berkreasi dengan cssnya, karena css diatas hanya untuk pembelajaran saja.

Cukup sekian dan semoga bermanfaat untuk anda...