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.

Tutorial Blogspot

Tutorial Blog

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

8 komentar :

Hajsmy: jadi sexy nich melihatnya,, hehehehe..
makasih gan :)
madinah: wah dasyat nih, tapi saya lagi nyari yg adding lintas berita buzz yahoo, buzz google

Komen saya yg ke 6
Habil DS: keren... tapi bingung mau taroh di mana..??
ilman hilmi oriza: wooooowwww ......... is sexy banget ,....heheheh
Nice Share gan ....
ini komentar saya ke 9
PT. Blog: welwh.....sexy banget caranya pas denan nama sexy borkmark
Pusat Tutorial Blog: lanjutkan tutorial cara updatenya sob
Boy: Wah ini widget berbagi atau sharing yang kayak punya antum itu kan?wah thanks gan :)
Ivan Mantovani: Sharing is Sexy + blogwalking :)

Posting Komentar

Silakan berkomentar untuk mendapatkan backlink gratis dari Blog Dofollow ini. Komentar yang tidak sesuai topik, SPAM, maupunmengandung kata hinaan, dsb terpaksa akan saya hapus!

ZonaUnlimited

Jumat, 25 November 2011

Cara Membuat Widget Sharing is Sexy

8 komentar :

Posting Komentar

Friends Blog

Follower