Fitur dengan plugin sosial menarik dan Kotak pencarian Profesional

| | Print This! | 1 comment

Do you like this post?

Penampilan adalah hal pokok dalam bersosial, dan kemudahan adalah potensi yang ditawarkan sebagai pelayanan kita terhadap pelanggan. Duhh kok ceramah!! ^_^
Artikel kali ini Blogger Tutorial akan saya berikan sedikit tips dan trik bagaimana membuat fitur lengkap kotak pencarian (Search Box), RSS Feed, Email Feed, Twitter, Facebook, Delicious, Digg, StumbleUpon, Favorits dan layanan lainnya.
Sobat setia Dunia Tutorial semua tidak perlu banyak merubah-rubah, hanya tinggal meletakkannya di sidebar blog sobat. Dibawah ini contohnya. Tertarik? mari ikuti langkah dibawah ini.

• Login ke blog - Rancangan - Edit HTML
• Geser kebawah atau Ctrl+ F dan temukan kode </head>
• Copy kode dibawah ini 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>

• Simpan dan sekarang beralih ke Rancangan - Elemen halaman - Tambah Gadget
• Pilih HTML/JavaScript dan kode dibawah ini  

<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/AVvXsEiXcePNRDt95_YTVbjCDMr6D6L05LVsUeanIak3o44pQMBpdK3hmPaw4m_J4VCVsULPE3t7I1PUH1rL4Wchnon-G-oPM-BIstf5PTIV3ENkyGqj1kyxfvj65ApXobPbuFOxQD8ImhefKMzo/"  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/AVvXsEi_MGPpg9LrdWdwkMdjoRgXf0BBsKqFiriplJxmxB2kiC20m1CSyFkAUmjmcclzwmmpEeJrhQdsE3lFr9iJ45gyzlD3p1IWlcTZ1LTbB7R13JpyIIEV-KSsKIOIDeHYqPzFV5mY5fnH2lLo/"  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/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniEeeMcvwOpsJQew2AVnw8ddG2Zd3tQSUEWKyunJXY47bEywgjR5Mjwce_2T2zGxudel6mM5rPKhUkjop5jXmIaP1T334ch3KmPX7wZuK7v26nEOoB9La1WrgPkgefDaie9wTwyK-0i4n/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>

</div></td>

<td><div class="facebookbox">

<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYfK48g_GUMoMoOZI6lSAfHCPFuSC5Jq616XRA8PaZn0s-7cGf5LqC1M2CAl_RMoYnD3yvNJ3oNvU3cri_lTkprxXSoqq_Lc-Obp-L53RB34dW2iIoJj9RFMR0yrU3rem_Yh9ejN4bVgu/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" 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/AVvXsEgKTB8YbQYPlXo2VTnA4teZ4mNzhFa09ayE5KI5rwax11WrjRR0o6XM7BVLgB-kH0Qfh1iuL70vJpz5x4_yQUQwkWbbjgn0tfXVhTPLKPmdT4M_XZLv7lvkOTjkN1B7AQ3Kn7xphBWsKKk/' width='32'/></a>

<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYGR6fW9uyr15W4MJEgii_jvQ6liKv-zRzlICisaqEKSgo97Vv9gSIM-rSR6iwhi-N3tapmmD51eIhy2FLvgyNe5jSiMqe6Os1oIjOIPJ02Umk0wOoHOeaLuGCvA61cDRSGXSWUX60pUg/' width='32'/></a>

<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dtIuMeDOGueqE8E46Stw0A7v6Dbw2q0hRqOB-sm7w2L5IMK-rMFOcXmoec4AQq5sRmGGtXL5O8SO_FtWjHWBl9g3H2mBac3zHhFgJocd16ixLuC8fdFTLa0KqwlWKqP8qnc1CEZE4xs/' width='32'/></a>

<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAI0KGzYm6ex8RxAUhA0N7dC5-dBTXrlok79gspbsBR0LslmMIvNRK4ezCwF4j4g66EGCy1vai6l7JD8-doMnLtnY8fGSExAEbmpbDUkq0OMgQl4v_rJuE_p09tPq2ugYB13dBcUs2-4/' width='32'/></a>

<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimN9A7R489D3jbaoSYKOgMM9CNxH2xclWwwspmTzk2D9rP1NioWuw5ta7nglQS2OsaEwIuqsszw2UdOGre9wIyhyYp5-NnZSAUuBzxPFECzjWslkwNeGbZYVhrwHGUAB6uXdI8zuKkwdk/' width='32'/></a>

<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgq17x0OEIxDTP-14KNcwOqcHractwlilo3abfbV1sq9yEeijsKXqbJ8Bg-ICoIPIXPqYVqKAHxjdjdYMsGyvKcadaGBbRVaQ4OP0VQKDEvtx2Mlxr89rA0Q2r_My7AwjlSHI5gaN1Sg/' width='32'/></a>

<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBqneQpyYDTVYjuD4nIOLzavyXpObe_TpAg2w2EY18c7Amv4ML4nRMgvmfccQvHEUKQHSMacQvrjH-80XZYSz6_tPZLgfJbANF71w0SLfpNkl2VmUa6idoQyehD5JU-TWXiz0p81YqrW8/' width='32'/></a>

</div>

<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

</div>

</div>

           /*www.duniatutorial.com*/ 

Catatan

• Ganti FEEDBURNER-ID dengan Id Feedburner sobat, ada 4 yang perlu dirubah 
• Ganti TWITTER-USSERNAME dengan Id Username sobat
• Ganti FACEBOOK-USERNAME dengan Id Facebook sobat 

Simpan dan Selesai!!

Artikel Terkait

Posted in: Facebook,Gadget,Kotak Pencarian,Twitter