Cara memasang widget share multi fungsi dan multi guna pada blog

Labels: desain, gadget

Bukankah menarik jika pada blog sobat memiliki widget yang memiliki fungsi multi guna? Gambarnya seperti ini

Gambar 1.1. Tampilan widget

Menarik bukan? Untuk membuatnya cukup mudah kok, ikuti aja langkah-langkah di bawah ini

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

Gambar 1.1. Edit HTML

Gambar 1.2. Lanjutkan

2. Cari kode </head> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi

<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% "Tahoma",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>

4. Simpan templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

5. Masuk ke Dashboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript

6. Masukan script dibawah ini pada konten elemen 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 == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" 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/AVvXsEh5bUWNplvVdDjG4iTJ_AYVWcM_kNB-SzmpMjXHPjjNEt7wNqb9Wst1tWskjYaILWKeEljC5E_jbL7mhgIIrlmg69RJONbisgA5T61JNenfwUNCsFq8s2hCiBwEGpmvJZ_Vrsl9fDgY0PIr/" 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/AVvXsEgV9Y076Gv7QxOnqNZF8-fMPQCcDwgIwJZ-0wZJ8TeOW662uT7bJMPn1EEiWass8pbkvFVEdcJuHQ-KyXLhAESqnWdbaZudGFVL9c1cvmQCjXiUJw6gjB8-Tw21lGpet4gjfax3H2bZ-to8/" 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/AVvXsEi6_ofbLVOhYgAHCZ6P6Wj9VVI8FRms1rOEf8LynY27U4Z94YMIDeP0fLHeheH2_VL_vL-vzvZAm0vrHC2nwoww6PqTBvMlP11so-Koc79G0QTUSTDxaY8edT7q3hGpl_cKitEOWYbsEZCt/" 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/AVvXsEhsCVUM1g6DBZh2sWg3O5-MWVYFrcubF6TwSH5kW3hIKTOF4Il2wTgxurgeIA3AUZKyeziwpQIyYA0wBgBfIKZEH-YflH8AQTsZyk0MuXIZzZR6OBJyK3sCPuq9_MtSbNxfBNVrJjqi2v4U/" 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://rizved.blogspot.com/" target="_blank">Tutorial Blogger</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/AVvXsEhX_RRTa_Ysu0nRrhjoU0dkYGm5IgnEA6bUvAo3RrrZ2zMuPZW7CeU0Ha0E2L_d-useXQ5KPioAyuy9N6XfxB0U1aqiy0Vu5AT0GkVvIv5I2guAoZj7g-ZUR0OeqG20zRFQSIMrS-hpLDY/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8y33wYmHdMWM3J4WEtsFahl_Sj6IVzAXYjANoqQUqiE2Vm6YEETSs26W9v0ERWqkv3CT3pTrGkzO4RW04cbuxlaB0Rx4uZyxrZuXyP7CY0YBxx3WDeWgjedZ1JdBkhKCoBwgrtfxXYw/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7Tm-ilcdIQ9uOKuxsUmjwNDfNU1eCfL8-IaUxohfERfiyq5X4fLkb9nw_hhrapEZksbE70pHDoTT8WssozuZawgrS10TvKc-KmjbMWnySfSlF3sITDZ3q1EMYKQ1YQqqBCIDyYSbLoc/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Z7QWLLDFHPngRLgesAtHJFF8LQVQHiA7reIZZbBDHhH2HFw_gPd5IQL935eY7c-7W-aTsPZEFgQY4OCU6rCpxN7eKCBYyaD4JjF_axuVXE_Bhtavxoxxzi-tM8Squ9qa_869WiiWZgI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWJoz5hnc67-_QUgXLC-64HWqikc_vE2Kon-QwtXo8aW-l9Gw9z-jsfOBsU3ZUnMQwpFZsdLIvpk-4MQLTGebXeDRbZc1QHgtZ-_Idi9Pg5p9N2vdy-Z-9V4wJAO3VntPtDEsr6cPdC0/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjua0KYDCoqDWPrjiQMCRClj8CzdaGO_eJvCpUz4SKmrOuthCYG9mFvFNyaTjC3DEh6GlbGrqowK3DTWbEgbLqYQhzVugtmg2P0zDKygzdBdRyEH0JuxV5ySXWYWm1AyBOOJEu0NvEvojY/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FH6GA1d_-ZzmGivPK1q42DwzNrImIHx2KZDULyBBcO1iM3qwfE964jUyoh4gVfC5bPJoBEKXmo48LKzXIpkmCW4U3NaVdRJ2W93skQmGO07UCtpdRZ2uTzsQrNplUHhyjIuNyWAC_iE/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div></div>