Cara Membuat Kotak Search Disamping MenuBar..

Unknown

Rabu, 20 Agustus 2014

Bagikan :

Tweet

Cara Membuat Kotak Search Disamping MenuBar..

 Haii blogger pada kesempatan kali ini saya akan membahas tentang Cara Membuat Kotak Search Disamping MenuBar..

Menambah fasilitas kotak search di blog bisa menjadi sesuatu yang sangat membantu seseorang yang berkunjung di blog kita.

Google pun sebenarnya telah menyediakan widget untuk blogger posisinya dibagian navbar, bahkan bagi yang sudah ikutan AdSense salah satu produk yang ditawarkan untuk publisher adalah kotak ajaib ini but kekurangannya adalah terkadang tampilannya “tabrakan” dengan tampilan blog kita.

Buat rekan-rekan yang ingin menambah kesan kompak dengan menyandingkan menubar dengan kotak pencarian seperti pada blog ini mungkin cara berikut ini bisa menjadi solusi…

Berhubung ini sedikit mengubah kode template so..seperti yang selalu disarankan oleh para suhu blogger sebaiknya jangan lupa backup dulu template anda sebelum melanjutkan proses ini.

Langkah pertama; Menambahkan CSS,
Masuk ke akun blogger Anda blogger terus pilih blog yang akan ditambahkan fasilitas search-box-nya, pilih TATA LETAK kemudian Pilih EDIT HTML dan jangan lupa beri tanda centang pada EXPAND WIDGET.
Cari CSS menubar anda jika belum silahkan baca caranya dengan memasukkan katakunci di kotak pencarian . Setelah itu tambahkan kode dibawah ini tepat diatas </b:skin> ; atau dibawah kode CSS menubar Anda sebagai contohnya perhatikan kode dibawah ini :

#bgmenu {

background: #333;

width: 950px; /*--- lebar keseluruhan bar menu ---*/

font-size: 12px;

margin:0px auto;

padding: 0px auto;

border:2px solid $bordercolor;

border-bottom: 4px solid #555;

clear:both;

}

.menuleft{

width: 700px;/*--- lebar untuk menubar ---*/

margin: 0px 4px 5px 4px;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: normal;

text-decoration: none;

}

.menuleft ul{

margin: 0;

padding: 0;

float: left;

width: 100%;

background: #333333;

border-top-width: 1px;

border-right-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #333333;

border-right-color: #333333;

border-bottom-color: #555555;

border-left-color: #333333

}

.menuleft ul li{

display: inline;

}

.menuleft ul li a{

float: left;

color: #FFFFFF;

padding: 5px 11px;

text-decoration: none;

border-right-width: 2px;

border-right-style: solid;

border-right-color: #333333;

}

.menuleft ul li a:visited{

color: #FFFFFF;

}

.menuleft ul li a:hover, .menuleft ul li .selected{

color: #FFFF00 !important;

padding-top: 5px;

padding-bottom: 5px;

background: #555555;

}

.menuright {

width: 260px/*--- lebar untuk kotak pencarian ---*/

font-size: 12px;

float: right;

margin: 2px;

padding: 6px 5px 0px 0px;}

.menuright a img {border: none;margin: 0px;padding: 0px;}

CSS Code warna orange diatas adalah kode yang mengatur posisi dan penampilan menu bar secara keseluruhan, kode warna hijau adalah kode CSS untuk menu bar, sedangkan yang merah adalah CSS code untuk KOTAK PENCARIAN, dan kode yang warna biru adalah lebar masing-masing elemen di navbar yang nantinya disesuaikan dengan ukuran template Anda.


Langkah Kedua, masukkan kode JavaScript dibawah berikut tepat dibawah kode JavaScript < div id=’content-wrapper’ > anda:

<div id=’bgmenu’>
<div id=’menuleft’>
<div class=’menuleft’>
<ul>
<li><a href=’/’>Home</a></li>
<li><a href=’/search/label/Label-1’>Label 1</a></li>
<li><a href=’/search/label/Label-2’> Label 2</a></li>
<li><a href=’/search/label/Label-3’>Label 3</a></li>
</ul>
</div>

<div id=’menuright’>

<form action=’http://NamaBlogAnda.blogspot.com/search’ id=’searchThis’ method=’get’ style=’display:inline;’>

<input id=’searchform’ name=’q’ size=’20’ type=’text’/> <input id=’sbutt’ type=’submit’ value=’search’/>

</form>

</div>

</div>
</div>

Kode berwarna biru ganti sesuai kebutuhan dan buat yang ikutan adsense silahkan replace kode diantara tags kode yang berwarna hijau diatas dengan kode “AdSense for search” Anda.

Jangan lupa save hasil edit ini dan tekan tombol PRATINJAU untuk melihat hasilnya.

Tag : Tutorial Blog