cara membuat kotak pencarian artikel postingan di blog

Membuat kotak pencarian artikel postingan di halaman blog atau search box, merupakan suatu tehnik yang paling jitu untuk membuat para pengunjung blog anda senang berlama lama di halaman blog anda, hal ini menjadi keuntungan yang besar pada halaman blog anda. Memanfaatkan aplikasi search ini sebenarnya membuat para pengunjung blog agar lebih mudah untuk mencari berbagai artikel yang dibutuhkan dari halaman blog. Setelah saya semalam mau ngirim email pada seorang sahabat, ehhh ternyata saya melihat satu pesan masuk, ada seorang teman yang ingin memesan untuk dibuatkan search artikel postingan dihalaman blognya, sehingga saya sekalian saja posting di halaman blog ini mana tau teman teman yang lain membutuhkannya kan dah lumayan daripada artikel ini hanya untuk dihapus saja. Oke saya rasa penjelasan untuk kegunaan search artikel postingan ini tidak usah saya jabarkan lebih detail lagi sebab teman teman, sudah lebih memahaminya dari pada saya sendiri, kita langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi


#BD-search { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OAteP-DrTeko8wP6LRyIA07WXPWG9MClp-WWKUFBxkhM_DAoIYmULA3UCPbRukMpys9h3bKcIAIOUqqacx1JxzMUH5EcKo9cLphofUjQ2TeGUhxpt-m8kyFuUVtSr2BPhjE-tu2a7JU/h49/search-black.png") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
#BD-search form { height: 44px; }
#BD-search form p { display: block; margin: 0; padding: 14px 0 0 70px; }
#BD-search form p input {
width: 285px;
border: 0;
background: transparent none;
color: #FFFFFF;
font-weight: 300;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 1px 1px #000;
}




5. Perhatikan kode CSS diatas,
   Kode yang berwarna MERAH adalah link gambar latar belakang
   Kode warna BIRU adalah warna huruf
   Kode warna KUNING adalah jenis huruf
   Kode warna HIJAU adalah ukuran hurufnya
   
   

Untuk meletakkan kode htmlnya silahkan anda pasang dimana tempat yang cocok buat halaman blog anda, copy kode dibawah ini kemudian pastekan ditempat uyang layak untuk halaman anda. Anda dapat memasangnya didalam widget ataupun di tubuh html/xml blog anda.



<div id='BD-search'>
<form action="URL BLOG ANDA /search" id='BD-search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel terkait...&quot;;}' onfocus='if (this.value == &quot;Cari artikel terkait...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel terkait...'/></p>
</form>
</div>



6. Perhatikan kode diatas..
   Kode warna MERAH ganti dengan URL halaman blog anda
   Kode warna BIRU adalah isi dri search artikel postingan.
7. Setelah semuanya sudah anda pastikan dengn baik saatnya anda simpan perubahan dan lihat hasilnya.

Untuk meningkatkan kreativitas dan keselarasan warna, anda tidak perlu ragu, silahkan lihat jenis search artikel postingan ini, sya sudah membuatnya agar lebih banyak pilihan untuk sahabat sahabat bloger saya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38BSyY10qZviUvOLZmpA-GdcywirN721uu8L9SpBUPXEIK8wpsEV0K67sPESkkssCKk17QqFjoe_OnynckwO2nhLPP34Q-x5BBBu72Wn6Uj2acmAPWINKH6fJbmvWap-KjgkCXQ-cCcA/h49/search-b.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggf5ZXlcvClAA6fW5nI0XMvsgOByiaK8vpOa_LB9fw67ItxOsLP3l7p-EoVv_U7Pi2lhQZbCSEN7Hi8Oi99WZQ2TiXU_VUXoDsxT29HskoSkBkPPNaSew7owwg_2s7DoZ9SflgBd1j88/h49/search-m.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpkFUDaOI8ZVFZWdkiYIfmiPnH0gXQ4Rj67HDhmSnOUl_ikhfBpiP9FlxUXizi0fQUa9TAkYJblWy2e-HLYJfpt8ClW7fkGi_RHiL_I3Bj5WRb3RfOlhSt6-pScwe6krUQVbZJTT_Y2co/h49/search-k.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGZ6vYdUyMgKStIKSk4WchsHavxuqYC4DuHSSMByNWd-o-nqpB6EktgdS4BZxVgUA4nKgXAhGjOnx4upsO9X49-qy26RKj9-5ZjG8DndWmTpw1W5ApU4sZzEbswMjo1VhcX1oxBjYpf4/h49/search-h.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeXyUdlmg6QYFKvaKdv4nGksGB1hQcdj1ZvqCv3MKXXa8hy2Fb_v-ClClP-Y9vR8jIMZzm-XD86rdDWCG1Tg0nBBCuM7vvQMUyQUOBA2r59BO1rzItKlkzME9kLD3TEmqJX7hjk7-yJI/h49/search-brown.png

Kesimpulan

Agar lebih leluasa menganti tampilan search artikel postingan ini pada halaman blog anda sesuai dengan warna tampilan halaman blog anda, Coba anda perhatikan kode warna MERAH pada kode CSS yang berada pada spoler yang paling atas. Kode tersebut adalah URL dari background search artikel postingan tersebut, bila anda ingin menggantinya dengan gambar yang telah tersedia diatas ini silahkan anda ganti hanya kode CSS yang berwarna MERAH tersebut dengan kode dari gambar background yang ada diatas ini.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:33 PM