Cara buat kotak Pencarian Untuk Web atau Blog

Pada artikel ini, saya akan menjelaskan bagaimana Cara buat kotak Pencarian Untuk Blogger. Kotak Pencarian ini lebih menarik, sebab di lengkapi dengan beberapa tombol share atau tombol berbagi kebeberapa Social networking seperti : Digg, Twitter, Facebook, Stumbleupon, Delicious. Selain itu tesedia tombol berlangganan lewat RSS Feed, Email Feed, Twitter, dan Facebook.
Serangkaian tombol pencarian dan tombol jaringan sosial ini didukung oleh www.addthis.com. Anda bisa langsuing membuatnya di www.addthis.com, atau anda bisa membuat sendiri dengan panduan yang akan saya berikan dibawah ini.

Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

8. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Kotak Pencarian pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg224XINFCWUrheolDB-xKCV8xfKB5RS7Ys1kxGpR7CapsYdl8v7RfYazR8_a89GvK0Am2nl0TclRXlazDFrjMF8sIN0iSAMpgC3h31oaT0G7GlwJYecmez3ChLP9V85DNwVZblA_mg46tn/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOCLIqDf_1WhgnZwl26H70ZCSUmKF3j7w_OZb2KlpbSQxooE8X_JwegLnbKq1O4X1Nx-W9KHy3cRI2VXVb0DUBppYgtZC76cej-Z-VtpNOla7UHfb0lPuRAa71Z3DuM7Oz03H8PEn4Mz9/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/USERNAME-TWITTER" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQW8_dpIgRHDyUMn3hdJATZGwXJRqfbHvIAWhhzI78yhNGV06jAnCyaHFGhmRw9qajZfq2dTWp4JNHSYN0DCg0XTEbmFYWDJXofFRUK08Pauhwl_-okfiekkLB4dz5vrDmAGvroEmXiFT/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/USERNAME-TWITTER" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/USERNAME-FACEBOOK" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CbpPGqKuwYJX395bKaea12sHfZ4ma7E9IOLEhxX9akICLbzIuVIIRy31kzurC34ziSfHVPkpTH25akI-Q6wFA9zqlp26ixnFRnQfYuSWHx6JbRygGI9UFxG0GyL3loU1O0XBkZH5QX0q/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/USERNAME-FACEBOOK" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9alkJ6SQVE3lq_NnM_Ebnl8OljU6WEKwk3ydATyCPqaXQiAaOLFFyARBr7RuxWPkeF8XFLwpRlXrQeds4DkophXvEUAPiKgBgDAinAqhl9m0N378NPO371lNuzkGNO-oMOvSdZs_fHz0/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02zVWVn1Qhl1TL0s5PJgVuTlDW34GPH8OUfpsaJZmkn1-YfpD6BHdQ3pDiaK2Z3OBkp34jiPFbXyjy6T01bMIxWmF6cUCQJUNlHLdovE0iI2ThRSz9qhkE514lUookIr9vx837_Dan-E/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWeITxEslGqIcBdaeUC68NAgCFKCPCYxq5zUH9XJ0-mqkpSWJ5zFcgaA3LcvU19utem4-ai2q6p_bfxgeHtvd83OhpxA6v8c8XTDfN745vtmN2j1yW93apNfd_5FmcGjnTxsaj-jBRJGo/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgr0NNWFC4JvxYrHERGsatY-vTwV20FVSGCjypSEb6sc5Jz7M2jyTSTiMk8FlNj2c2PFgnfJg_UIZ_OYOC3f-05i_gUoTGXn4KZ7I99x5SNTGphSdUc6ZmBxBpgcMiJninXlggHJaEucI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvzZmMJ5fB5J1KwxJVGx78MaPRVhyrTzkAFR-jKsSqh8eAs4NSJJ2ZUgT0RjY92hQ6sA_1FXW-UqFM9jwafyeESskbhpmqMR2PkpxNXOmyhcVDEYvhca-OGsdTnYBeoBM30XufwpplfBc/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4rZIH0fkzjCb6z8-oWmrZVk0inVSuAxzekjXFWaN2YE1y-iBx0dFMVTh91F5TR4QyyEqtKYMZ7Gn1VGwefs7qbhPjHCH4huLsU45C-8EnecwprocmELvUjUfsVRxsHC6iKSqs7JkCes/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoy6jTxjBwYbPRGzTTAHN1JaUFwvYcpqr0x_p2UXW6JpwaQLHV0gPLAiGsbEQ1UOhrAlbJJyAG-QoHrwHZciGypZdcgo_i2gUCgGMOUqrUiUpUgWmQ5vwfa7OYKY0iCl5fWHSfOtNY7YY/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Catatan :
-Ganti tulisan merah dengan FEEDBURNER-ID anda
-Ganti tulisan Biru dengan USERNAME-TWITTER anda
-Ganti tulisan Pink dengan USERNAME-FACEBOOK anda

5. Simpan.

Dan sekarang anda lihat hasil kotak yang baru anda buat....

Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.