Membuat Menu Header Dengan Kotak Pencarian

Memasang template bawaan blogger tentunya memiliki keterbatasan, salah satunya tidak terdapatnya Menu Navigasi/Menu header dan Kotak penelusuran yang terpasang secara bersama-sama. Nah kali ini saya akan berbagi bagaimana membuat Menu Navigasi/ Menu Header yang dipasang secara bersamaan dengan Kotak Penelusuran guna mempercantik blog sobat.

Berikut ini tutorialnya:

1. Masuk ke Dashboard Blogger sobat.
2. Pilih Tata Letak > Add Gadget/Widget > Pilih HTML/Javascript> Kemudian masukkan  kode script dibawah ini.

Lihat Script:

<style type="text/css">

       #navright {

              width: 200px;

              font-size: 11px;

              float: right;

              margin: 0px;

              padding: 6px 5px 0px 0px;

              }

          #navright a img {

              border: none;

              margin: 0px;

              padding: 0px;

              }

</style>

<div id="tabshori">

<div id='navleft'>

<ul>

<li><a href="http://onetroverlight.blogspot.com"><span>Home</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Tips%20dan%20Trik%20Blog"><span>Blogging</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Software"><span>Free Aplikasi</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/serbagratis"><span>Gratis</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Money%20Blogging"><span>Money Blogging</span></a></li>

<div id='navright'>

<form action="http://onetroverlight.blogspot.com/search" class="cariform " method="get">

<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="cari" /></form>

</div></ul>

</div>

<!-- akhir bg_nav --></div>

     3.  Save dan lihat hasilnya.

Sebagai Catatan: Ganti tulisan berwarna merah dengan URL punya sobat blogger.