Cara Membuat Widget Sharing is Sexy

Widget Sharing memang widget yang penting dalam suatu blog. Widget sharing berfungsi untuk memudahkan pengunjung berbagi dengan orang lain lewat beberapa sosial media yang ada. Salah satu contohnya yaitu Facebook. Jika sobat melihat langsung di bawah postingan artikel ini, terdapat kotak subscribe email (baca : Cara Membuat Kotak Subscribe Email) yang di atasnya terpasang widget sharing is sexy seperti yang dimaksud. Tampilannya begitu simple dan tentunya juga sangat irit tempat.

Untuk versi lain dari Widget Sharing ini yaitu Widget Sharing Is Caring (baca : Cara Membuat Widget Sharing Is Caring). Nah, dari pada kelamaan mendingan angsung saja, berikut adalah tutorial Cara Membuat Widget Sharing is Sexy :

Silakan sobat menuju ke Tab Rancangan » Edit HTML, lalu pastekan kode di bawah ini tepat setelah kode ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks { height:54px;background:url(http://img709.imageshack.us/img709/57/sharing.png)  no-repeat left bottom;position:relative; width:540px }
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 }
div.sexy-bookmarks  ul.socials { margin:0 !important;padding:0 !important;  position:absolute; bottom:0;left:10px }
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 }
div.sexy-bookmarks  ul.socials a { display:block  !important; width:48px !important;  height:29px !important;f ont-size:0  !important; color:transparent  !important}
.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 }
.sexy-furl {  background-position:-300px top !important }
.sexy-furl:hover  { background-position:-300px bottom !important }
.sexy-digg  { background-position:-500px top !important }
.sexy-digg:hover  { background-position:-500px bottom !important }
.sexy-reddit  { background-position:-100px top !important }
.sexy-reddit:hover  { background-position:-100px bottom !important }
.sexy-stumble  { background-position:-50px top !important }
.sexy-stumble:hover  { background-position:-50px bottom !important }
.sexy-delicious  { background-position:left top !important }
.sexy-delicious:hover  { background-position:left bottom !important }
.sexy-yahoo {  background-position:-650px top !important }
.sexy-blinklist  { background-position:-600px top !important }
.sexy-blinklist:hover  { background-position:-600px bottom !important }
.sexy-technorati  { background-position:-700px top !important }
.sexy-technorati:hover  { background-position:-700px bottom !important }
.sexy-myspace  { background-position:-200px top !important }
.sexy-myspace:hover  { background-position:-200px bottom !important }
.sexy-twitter  { background-position:-350px top !important }
.sexy-twitter:hover  { background-position:-350px bottom !important }
.sexy-facebook  { background-position:-450px top !important }
.sexy-facebook:hover  { background-position:-450px bottom !important }
.sexy-mixx  { background-position:-250px top !important }
.sexy-mixx:hover  { background-position:-250px bottom !important }
.sexy-script-style  { background-position:-400px top !important }
.sexy-script-style:hover  { background-position:-400px bottom !important }
.sexy-designfloat  { background-position:-550px top !important }
.sexy-designfloat:hover  { background-position:-550px bottom !important }
.sexy-syndicate  { background-position:-150px top !important }
.sexy-syndicate:hover  { background-position:-150px bottom !important }
.sexy-email  { background-position:-753px top !important }
.sexy-email:hover  { background-position:-753px bottom !important }
</style>

Click Expand Template Widget (kanan atas). Tekan CTRL + F di keyboard, lalu ketik kode <data:post.body/>. Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama

<div  class='sexy-bookmarks'>
<ul class='socials'>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<li  class='sexy-syndicate'><a href='http://feeds2.feedburner.com/ZonaUnlimited' title='Subscribe to  RSS'/></li>
<li class='sexy-email'><a  expr:href='&quot;  mailto:?subject=&quot; + data:post.url +   &quot;&amp;title=&quot; + data:post.title'   target='_blank'/></li>
</ul>
<span  class='sexy-rightside'/></div>

Kemudian Simpan Template.

Posting yang berjudul Cara Membuat Widget Sharing is Sexy ini Diposting oleh Coba Coba pada 11/25/2011 01:22:00 AM
Label: Tutorial Blog, Tutorial Blogspot
Jangan lupa berikan komentar anda pada artikel yang berjudul Cara Membuat Widget Sharing is Sexy ini :DD