Cara membuat kotak pencarian sidebar

Trik

Kotak pencarian berguna untuk membantu pengunjung untuk menelusuri sebuah artikel di dalam blog menggunakan kata kunci tertentu yang di kirim melalui query ke directory blog. Tutorial ini merupakan bukan hal baru, namun meletakkan/memasang kotak penelusuran di blog memang tergolong penting jadi sebaiknya anda memasangnya untuk para pengunjung anda. berikut ini adalah cara memasang kotak penelusuran di blogger


Pertama silahkan login terlebih dahulu ke akun Blogger.com anda
Pilih menu tab Template > Edit HTML
Cari kode tag sidebar di dalam HTML template anda, biasanya seperti berikut

<div id='sidebar-wrapper'> atau <div id='sidebar_wrapper'>

Lalu letakkan kode berikut ini dibawahnya:

<div class='search-form'>
<form action='/search' class='clearfix' id='searchform' method='get'>
<fieldset>
<div id='searchfield'>
<input class='text clearField' id='searchbox' name='q' onclick='doClear(this)' type='text' value='Cari Articles'/>
</div>
<input class='submit' type='submit' value=''/>
</fieldset>
</form>
</div>

Setelahnya, kemudia cari kode tag ]]></b:skin> dan paste kode css dibawah ini diatasnya

/* search form db */
.search-form{position:relative;margin:0 8px 0 4px;width:auto !important;width: 400px;max-width:400px;}
.search-form form fieldset{border:0;margin:0;padding:0;background:none;background-color:transparent;}
.search-form #searchfield{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81vwqZ0fOlAHbZzOqtRqRFXdWDzVY308_GhcrZ6yemHk0pQLpzwU8Mnyj29uGqGw1UEboipVFNOduEKE72ZsVCGoWhcxWw9MfY8CLXLDessYMtkfN6iNcYqIB8vh_VAJf2bzNLheXbx0/s1600/search.png) no-repeat left top;height:34px;display:block;margin-right:55px;}
.search-form input.text{border:0;margin:9px 0 0 34px;padding:0;}
.search-form input.submit{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81vwqZ0fOlAHbZzOqtRqRFXdWDzVY308_GhcrZ6yemHk0pQLpzwU8Mnyj29uGqGw1UEboipVFNOduEKE72ZsVCGoWhcxWw9MfY8CLXLDessYMtkfN6iNcYqIB8vh_VAJf2bzNLheXbx0/s1600/search.png) no-repeat right -34px;height:34px;width:56px;margin:0;padding:0;position:absolute;right:0;top:0;border:0;text-transform:uppercase;text-shadow:#fff 1px 1px 1px;font-weight:bold;font-size:160%;color:#9b9b9b;cursor:pointer;}
.search-form input.submit:hover{background-position:right bottom;}
#primary-content .search-form{margin:2em 0;}

Langkah terakhir klik simpan perubahan dan lihat hasilnya.

Jika sobat ingin cara lebih mudah, Buka tata letak, pilih widget kotak pencarian dan tambahkan ke blog anda.

Note: Kotak pencarian/penelusuran ini dapat diletakkan dimana saja sesuai yang anda inginkan.

Semoga berguna...

Artikel Terkait

  • Syntax Highlighter sederhana
    Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator at…
  • Rahasia muncul dan hilangnya widget di blogger
    Trik ini di gunakan untuk tujuan tertentu, menghilangkan atau memunculka widget sebagai mana mestinya atau lebih tepat fungsinya. misalkan di halaman depan blog ini sudah ada daftar posting update terbaru, jadi untuk widget recent post lebih cocok di munculkan hanya pada halaman posting saja. trik ini juga bisa di gunakan untuk membuat halaman…
  • Lightbox image post blogger
    Apa Itu Lightbox image post, Lightbox ini Sejenis dengan Pop Up review, Tetapi Bukan Pop Up, Lightbox image post adalah event dimana ketika sebuah gambar pada posting diklik, maka akan muncul review gambar yang menutup semua tampilan halaman tersebut, contoh klik saja gambar diposting ini. Untuk mengaktifkannya, cukup masik ke dasbord blo…
  • Cara membuat navigasi Breadcrumbs
      Cara Membuat Breadcrumbs SEO Friendly 1. Masuk ke Blogger 2. Klik Template > Edit HTML > Lanjutkan 3. Centang Expand Template Widget 4. Cari kode ]]></b:skin> dan simpan kode ini diatasnya: .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb…
  • Blogger Mengatur Jumlah Posting per Halaman Label
    Blogger secara default biasanya menampilkan 20 postingan per halaman Label (kategory). Jumlah ini dapat kita rubah sesuai dengan keinginan/kebutuhan kita. Berikut ini langkah untuk mengatur  jumlah postingan per halaman label (kategori): Note: Sebaiknya gunakan browser Mozilla Firefox, jangan lupa mem-backup template sebelum mengedit …
  • Auto readmore tanpa menggunakan javascript
    Dengan banyaknya posting blog yang dibuat, readmore untuk setiap posting sangat perlu dan penting. Auto readmore javascript digunakan untuk menampilkan hanya sebagian artikel melalui fungsi document.write agar posting yang muncul di halaman index/label arsip tidak terlalu panjang, sedangkan isi artikel masih bisa di telusuri oleh peramban. Kel…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...