Tab view dilengkapi dengan Kotak Pencarian

Tab view yang saya maksudkan disini adalah merupakan kombinasi antara tab / navigasi yang digabungkan dengan search box atau kotak pencarian. Sedangkan kotak pencarian ini dapat mencari artikel yang ada di dalam blog, bukan website diluar blog sendiri. Setiap kata yang diketikkan di dalam kotak pencari, asal mengandung kata-kata yang sesuai dengan kata yang ada pada title post blog anda, pasti akan ditampilkan.

Penempatan kotak pencari yang berada di sebelah kanan tab view selain memudahkan pengunjung ketika hendak mencari sesuatu tulisan dari blog kita, juga akan menambah penampilan blog menjadi lebih profesional. Tab view versi brugkembar ini juga dapat menampilkan tooltip ketika mouse pointer berada di atasnya. Masih ingat kan... cara membuat tooltip? Kalau anda sudah lupa cara membuat tooltip silahkan anda buka kembali postingan saya klik saja disini . Coba perhatikan blog-blog master kebanyakan memasang seach box / kotak pencarian di sebelah tab view.

Berikut ini cara pemasangannya:
1. Login ke blogger dengan ID anda
2. Klik Lay out.
3. Klik tab Edit HTML.
4. Cari Kode kode ]]></b:skin>
5. Copy paste kode berikut persis di atas kode ]]></b:skin>

/* navbar
================== */
#bg_nav {
background: #7793ad;
width: 765px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
border-right: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 560px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #4b6a87;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 10px 8px 15px;
border-left: 1px solid #000000;
}
#nav a:hover {
background: #b4c64c;
color: #FFFFFF;
margin: 0px;
padding: 8px 10px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000000;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

6. Cari kode yang seperti berikut ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

7. Selanjutnya Copy paste code berikut persis di bawah kode yang tadi :

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://brugkembar.blogspot.com/' title='Kembali ke Halaman Utama'>HOME</a></li>
<li><a
href='http://brugkembar.blogspot.com/2009/11/daftar-isi-blog-brugkembar-jembatan.html'
title='Menampilkan semua judul artikel'>DAFTAR ISI</a></li>
<li><a href='http://brugkembar.blogspot.com/search/label/Tutorial'
title='Tutotial Komputer dan Blog'>TUTORIAL</a></li>
<li><a href='http://brugkembar.blogspot.com/search/label/Software' title='Berisi Software Gratis'>SOFTWARE</a></li>
<li><a href='http://brugkembar.blogspot.com/search/label/Artikel' title='Berisi Artikel Campuran'>ARTIKEL</a></li>
<li><a href='http://brugkembar.blogspot.com/2009/12/kode-warna-html.html'
title='Sangat Berguna Untuk Mempercantik Blog'>KODE WARNA</a></li>
<li><a href='https://www.blogger.com/start' title='Masuk ke
Blogger'>Login</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://brugkembar.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit'
type='submit' value='Cari'/> </form> </div>
</div><!-- akhir bg_nav -->

8. Klik tombol SAVE.
9. Selesai.

Keterangan:
Kode di atas adalah kode yang saya gunakan di blog ini. Apabila anda ingin memakai kode tadi, maka yang perlu anda lakukan adalah menyesuaikannya dengan template milik anda diantaranya :

1. Ganti brugkembar.blogspot.com dengan nama blog anda.
2. Teks yang berwarna ungu: 765 px; adalah lebar keseluruhan (Tab + Search box)
3. Teks yang berwarna ungu: 560 px; adalah lebar Tab (HOME , DAFTAR ISI, TUTORIAL, SOFTWARE, ARTIKEL, KODE WARNA, LOGIN)
4. Teks yang berwarna ungu: 200 px: adalah lebar search box / kontak pencarian.
5. Teks yang berwarna merah adalah Link dari tab HOME , DAFTAR ISI, TUTORIAL,  SOFTWARE, ARTIKEL, KODE WARNA, LOGIN.
6. Teks yang berwarna biru adalah Tooltip (Kalimat yang muncul ketika tab disorot pointer)

Itu tadi tips membuat tab view yang dilengkapi dengan search box di sebelahnya. Juga memunculkan tooltip ketika mouse pointer menyorotnya. Selamat mencuba.