Cara Membuat Widget “Sharing is Caring” di Blog

Senin, 02 Juli 2012

Salah satu hal optimasi terpenting bagi sebuah blog adalah sharing postingan ke social bookmark dan social network atau situs jejaring social. Sharing postingan ini tidak hanya bisa dilakukan oleh si admin blog tetapi kita juga bisa mempermudah visitor untuk melakukan sharing tersebut dengan teman dilingkup socbook atau socnet nya. Salah satunya adalah dengan memasang widget “Sharing is Caring” atau“Sharing is Sexy”.

“Sharing is Sexy” atau “Sharingis Caring” ini selain mempermudah pengunjung untuk berbagi artikel yang mereka sukai, juga dapat mempercantik blog karena memang tampilan animasinya yang menarik dan attraktif.

sharing is caring, sharing is sexy, memasang widget sharing di blog

Langkah- langkah Memasang Widget Sharing is Caring di Blog :

1. Login ke akun blogger

2. Dengan tampilan New Blogger Interface, masuk ke Template > Edit HTML , Centang Expand Template Widget

3. Cari </head> , kemudian letakkan kode CSS berikut tepat di atas kode </head>

<style type='text/css'>
div.beauty-bookmarks {height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Rf3qhV7Dsb59uW6Bdunz0buggSyX34yDyO1QpzIyuoWUGmzzwZzJBW83M1AobHl7LUaNL6JqRgp9d38EjyXdjympThtJnh4HHBRL4pNhh1f286e7xW_p8TYiQf-uOFvcwJyxdyyD7DjJ/s1600/buka-rahasia-sharing-background.png') no-repeat left top;position:relative;width:540px;}
div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Rf3qhV7Dsb59uW6Bdunz0buggSyX34yDyO1QpzIyuoWUGmzzwZzJBW83M1AobHl7LUaNL6JqRgp9d38EjyXdjympThtJnh4HHBRL4pNhh1f286e7xW_p8TYiQf-uOFvcwJyxdyyD7DjJ/s1600/buka-rahasia-sharing-background.png') no-repeat right top;position:absolute;right:-17px;}
div.beauty-bookmarks ul.socials {margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;}
div.beauty-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;}
div.beauty-bookmarks ul.socials a {display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ucYx6oRudTI_8s_0N8SHghhTOU-ZCn21OyM-Igsklae0a0JYKympvs-JoUwbcvYFll7eebvj1nsPV_wX2AstlrKkbhOiB6SrZuky5U7P5CapXXFtWHx1-Zale140vDHCAxT1Zz7pM8aI/s1600/bukarahasia-sexysprite.png') no-repeat !important;}
.beauty-furl {background-position:-300px top !important;}
.beauty-furl:hover {background-position:-300px bottom !important;}
.beauty-digg {background-position:-500px top !important;}
.beauty-digg:hover {background-position:-500px bottom !important;}
.beauty-reddit {background-position:-100px top !important;}
.beauty-reddit:hover {background-position:-100px bottom !important;}
.beauty-stumble {background-position:-50px top !important;}
.beauty-stumble:hover {background-position:-50px bottom !important;}
.beauty-delicious {background-position:left top !important;}
.beauty-delicious:hover {background-position:left bottom !important;}
.beauty-yahoo {background-position:-650px top !important;}
.beauty-yahoo:hover {background-position:-650px bottom !important;}
.beauty-blinklist {background-position:-600px top !important;}
.beauty-blinklist:hover {background-position:-600px bottom !important;}
.beauty-technorati {background-position:-700px top !important;}
.beauty-technorati:hover {background-position:-700px bottom !important;}
.beauty-myspace {background-position:-200px top !important;}
.beauty-myspace:hover {background-position:-200px bottom !important;}
.beauty-twitter {background-position:-350px top !important;}
.beauty-twitter:hover {background-position:-350px bottom !important;}
.beauty-facebook {background-position:-450px top !important;}
.beauty-facebook:hover {background-position:-450px bottom !important;}
.beauty-mixx {background-position:-250px top !important;}
.beauty-mixx:hover {background-position:-250px bottom !important;}
.beauty-script-style {background-position:-400px top !important;}
.beauty-script-style:hover {background-position:-400px bottom !important;}
.beauty-designfloat {background-position:-550px top !important;}
.beauty-designfloat:hover {background-position:-550px bottom !important;}
.beauty-syndicate {background-position:-150px top !important;}
.beauty-syndicate:hover {background-position:-150px bottom !important;}
.beauty-email {background-position:-753px top !important;}
.beauty-email:hover {background-position:-753px bottom !important;}
</style>

4. Cari kode <data:post.body/> , kemudian paste kode berikut ini tepat di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/blogspot/ID blog' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>

5. Silakan ganti feed dengan url blog sobat

6. Save atau simpan

Langkah- langkah Memasang Widget Sharing Sexy di Blog :

1. Ikuti langkah yang sama point 1-3 cara pembuatan widget Sharing is Caring di atas

2. Untuk poin nomor tiga, perhatikan teks berwarna biru

3. Ganti left top dengan left bottom dan right top dengan right bottom

4. Ikuti langkah yang sama poin 4-6 cara pembuatan widget Sharing is Caring di atas

5. Save atau Simpan

Selamat, kini blog sobat sudah dipercantik dengan widget Sharing is Caring atau Sharing is Sexy!

*Sumber : Blog Buka Rahasia