mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

Ads

cara pasang kotak search tepat disamping menubar.

Setelah beberapa hari tidak posting lantaran ada tugas “dadakan” akhirnya bisa nge-blog lagi, tapi itu pun setelah 2 hari ini ada project pribadi “mengubah penampilan” lagi…???
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 (sekaligus uji coba kotak pencarian saya gitu:) ).
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.

Semoga bermanfaat, thanks for coming and “Happy Valentine just for U” :) .

14 komentar:

khangzack mengatakan...

wah, informatif banget nich, ekalian mau tanya ah. Bagaimana caranya bikin menubar yang bisa scrolling seperti di web cpanel.com, di bagian product ada beberapa katagori kalo kursor di sorot kesitu, Trimakasih saya tunggu jawabannya.. Salam Blogger..

Oentoe_09 mengatakan...

sebelumnya saya mo ucapkan makasih banyak sudah mau berkunjung ke blog ini, salam kenal mas tukang ebook ;)
jujur pertanyaan mas saya belum tahu jawabannya coz emank blum kepikiran pengen buat nav seperti pertanyaan diatas, but insya allah di cariin jawabannya..sabar ya mas? and makasih dah mau bersabar :D

simple blog's mengatakan...

siip makasih euy...

All TV Service Menu Code mengatakan...

makasi yah buat tutorialnya, sangat membantu.

johani fauzi mengatakan...

ga ngerti bos tutorial nya tolong di perjelas lagi donk :D maklum masih newbie :D

Oentoe_09 mengatakan...

kalo boleh tahu di bagian mananya yang kurang jelas nih?

dany mengatakan...

kk taruk dmna java scrip niiiiiiiii kk

hanggarps mengatakan...

aku yang gak ngerti itu nyari div id wrappernya itu, itu dimana yah kuk tak search di htmlku gak ada yah

Unknown mengatakan...

ribet banget palaku kena html, jadinya blog q y ala kadarnya, mudahan sudi mampir Yang seru 10 tempat terindah di dunia

Unknown mengatakan...

kalo kode javascript nya aja yang dimasukin bisa ga? http://www.kakafiqry.blogspot.com

Haura Art mengatakan...

Thank gan, muantap banget.
mampir juga ke hauraart.blogspot.com

GanzarAripin mengatakan...

Sebenernya ini yang saya cari... setting kotak penelusuran sesuai keinginan

wok kian gie w mengatakan...

terima kasih cukup membantu... jgn lupa mampir ke blog ane gan utk yg cari produk TELAT BULAN http://gamauhamil.blogspot.co.id
http://obat-penggugurjanin.blogspot.co.id

Rei mengatakan...

mantap udah saya pake di http://ilmusupertop.blogspot.com

Posting Komentar

Label

Entri Populer

Blog support