Cara Pasang Widget Sharing Is Sexy

Widget Sharing is Sexy adalah kegiatan berbagi, kita bisa berbagi apa saja termasuk juga artikel blog. Sharing is Sexy, apa maksudnya ya? saya juga tidak terlalu mengerti maksudnya, tetapi saya mengerti fungsinya. Fungsi sharing is sexy adalah untuk memudahkan pengujung suatu blog atau bahkan kita sendiri untuk membagikan artikel yang ada di blog kita ke berbagai situs social bookmarking.

Dengan widget Sharing is Sexy ini artikel kita tentunya akan tersebar luas secara mudah di beberapa situs social bookmarking. Tentunya ini akan menambah pengunjung blog kita. Bayangkan jika ada satu orang saja yang membagikan artikel dari blog kita ke situs social bookmarking anggap saja itu facebook, dan dia memiliki paling sedikit 50 teman dan jika ada salah satu temannya yang tertarik untuk membaca artikel kita dan membagikannya lagi ke teman-teman nya yang lain, wah bakal banyak nih pengunjung blog kita.

Bagi yang ingin Pasang Widget Sharing is Sexy di blognya, alangkah baiknya saya untuk memberikan screen shoot widgetnya dahulu kepada anda.

Widget Sharing Is Sexy

Nah bagaimana pendapat anda setelah melihat gambar di atas? apakah anda juga ingin mencobanya di blog kalian? jika jawabannya ya, maka ikutilah langkah-langkah berikut ini.

1. Log in ke blogger dengan akun yag anda miliki.
2. Pergilah ke rancangan » klik template terus edit HTML, centang kotak Expand Template Widget.
3. Cari kode ]]></b:skin> , untuk mempermudah cari menggunakan control+f.
4. Letakkan kode CSS Widget Sharing di atas kode ]]></b:skin> .
5. Kemudian sobat cari menggunakan control+f kode <data:post.body/>. Letakkan kode HTML widget sharing di bawah kode <data:post.body/>. Jika ada dua, letakkan di bawah <data:post.body/> yang ke dua.
6. Save Template anda.

Code CSS Widget Sharing

1. <style type='text/css'>
2. div.sexy-bookmarks { height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat left bottom;position:relative; width:540px }
3. div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat right bottom; position:absolute; right:-17px }
4. div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
5. div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
6. div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
7. .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://img406.imageshack.us/img406/9198/sexyy.png) no-repeat !important }
8. .sexy-furl { background-position:-300px top !important }
9. .sexy-furl:hover { background-position:-300px bottom !important }
10. .sexy-digg { background-position:-500px top !important }
11. .sexy-digg:hover { background-position:-500px bottom !important }
12. .sexy-reddit { background-position:-100px top !important }
13. .sexy-reddit:hover { background-position:-100px bottom !important }
14. .sexy-stumble { background-position:-50px top !important }
15. .sexy-stumble:hover { background-position:-50px bottom !important }
16. .sexy-delicious { background-position:left top !important }
17. .sexy-delicious:hover { background-position:left bottom !important }
18. .sexy-yahoo { background-position:-650px top !important }
19. .sexy-yahoo:hover { background-position:-650px bottom !important }
20. .sexy-blinklist { background-position:-600px top !important }
21. .sexy-blinklist:hover { background-position:-600px bottom !important }
22. .sexy-technorati { background-position:-700px top !important }
23. .sexy-technorati:hover { background-position:-700px bottom !important }
24. .sexy-myspace { background-position:-200px top !important }
25. .sexy-myspace:hover { background-position:-200px bottom !important }
26. .sexy-twitter { background-position:-350px top !important }
27. .sexy-twitter:hover { background-position:-350px bottom !important }
28. .sexy-facebook { background-position:-450px top !important }
29. .sexy-facebook:hover { background-position:-450px bottom !important }
30. .sexy-mixx { background-position:-250px top !important }
31. .sexy-mixx:hover { background-position:-250px bottom !important }
32. .sexy-script-style { background-position:-400px top !important }
33. .sexy-script-style:hover { background-position:-400px bottom !important }
34. .sexy-designfloat { background-position:-550px top !important }
35. .sexy-designfloat:hover { background-position:-550px bottom !important }
36. .sexy-syndicate { background-position:-150px top !important }
37. .sexy-syndicate:hover { background-position:-150px bottom !important }
38. .sexy-email { background-position:-753px top !important }
39. .sexy-email:hover { background-position:-753px bottom !important }
40. </style>

Code HTML Widget Sharing

1. <div class='sexy-bookmarks'>
2. <ul class='socials'>
3. <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
4. <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
5. <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
6. <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
7. <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
8. <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
9. <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
10. <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
11. <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
12. <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/B-digg-TutorialBloggerDanSeoBlogger' title='Subscribe to RSS'/></li>
13. <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
14. </ul>
15. <span class='sexy-rightside'/></div>

Keterangan : ganti id feedburner saya dengan id feedburner, anda. Bagi yang belum mempunyai id feedburner anda bisa membaca artikel ini : Cara Mendaftar Ke Feedburner. Moga Bermanfaat yaaa :D :D :D