Membuat Social Share dan Search Box

social share dan search box
Share box dengan seacrh box ini merupakan widget sederhana dengan tampilan menarik. Ok gan...langsung saja kita bahas trick membuat Social Share dan Search Box. Ikuti langkah berikut.

Masuk blog anda - Rancangan - Edit HTML - Masukkan kode berikut di atas 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>
Klik Simpan Template

Selanjutnya klik lagi Rancangan -  Tambah Gadget -  HTML/JavaScript dan masukkan kode berikut ke dalamnya
<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/ID-FEEDBURNER ANDA" target="_blank"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/ID-FEEDBURNER ANDA" target="_blank">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=ID-FEDBURNER ANDA" target="_blank"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png"  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=ID-FEEDBURNER ANDA" target="_blank">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME ANDA" target="_blank"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME ANDA" target="_blank">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME ANDA" target="_blank"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME ANDA" target="_blank">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://blogspot-goblog.blogspot.com/" target="_blank">go-blog for blogspot</a></p>
</div>
Klik Simpan dan lihat Hasilnya
Selamat mencoba


"keep blogging smiley"

This entry was posted in

3 Responses so far.

  1. blogonol says:

    seep mantab ni tutorialnya. semangat bro. nanti kita mancing bro...sekali-sekali mancing, masa blog walking terus. ane tunggu kabar selanjutnya bro. keep spirits and do the best.

  2. ok hitung-hitung refreshing sambil fishing buat hilangkan pening dan segala kerjaan yang bikin kita pusing tujuh keliling. ayooo mancing

  3. mantap,,ini buat blogspot aja ya?

Leave a Reply

    About Me

    Foto Saya
    mac lean
    Jadilah orang biasa yang menikmati hidup apa adanya dan mencoba bersyukur atas apa yang dimiliki karena Kebesaran dan Karunia Allah SWT. Semoga kita semua dituntun ke jalan terang untuk mengerti akan Esa dan Kuasa Sang Maha Pencipta. Amin
    Lihat profil lengkapku

    Category

    • (4)
    • (1)
    • (4)
    • (15)
    • (17)

    Responses