Memasang Widget Sharing Is Sexy di Posting Blog

Posted by Herman on Saturday, September 25, 2010 30 comments

Sharing is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.

sharing is sexy: auto hiding social bookmarking widget
Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat disini.

Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.

Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:

1. Masuk ke menu Design->Edit HTML.
2. Beri centang pada 'Expand Widget Templates'
3. Letakkan kode berikut diatas ]]></b:skin>

div.beauty-bookmarks {
height:54px;
background:url('http://lh3.ggpht.com/_15FopxVONSo/TJ2lhfOASVI/AAAAAAAAD94/6nj2oVs3yrM/sharing-is-sexy.png') no-repeat left bottom;
position:relative;
width:455px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://lh3.ggpht.com/_15FopxVONSo/TJ2lhfOASVI/AAAAAAAAD94/6nj2oVs3yrM/sharing-is-sexy.png') no-repeat right bottom;
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-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url('http://lh4.ggpht.com/_15FopxVONSo/TJ2lhtVIAUI/AAAAAAAAD98/VgXQRtSTpQ4/sharing-is-sexy-icons.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-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px 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-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;
}

NB:
Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top

4. Setelah itu cari <data:post.body/>
5. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<!-- delicious start-->
<li class='beauty-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>
<!-- delicious end-->
<!-- digg start-->
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- digg end-->
<!-- technorati start-->
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- technorati end-->
<!-- reddit start-->
<li class='beauty-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>
<!-- reddit end-->
<!-- Stumbleupon start-->
<li class='beauty-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>
<!-- Stumbleupon end-->
<!-- designfloat start-->
<li class='beauty-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>
<!-- designfloat end-->
<!-- facebook start-->
<li class='beauty-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>
<!-- facebook end-->
<!-- twitter start-->
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<!-- twitter end-->
<!-- furl start-->
<li class='beauty-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>
<!-- furl end-->
</ul>
<span class='beauty-rightside'/>
</div>
</b:if>

Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:

<!-- facebook start-->
<li class='beauty-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>
<!-- facebook end-->
6. Kalau sudah simpan template anda. Selesai

Selamat mencoba!!


Recent Posts:

30 comments

Ahmad Fikry said... 27 September, 2010
Thx inponya.. sudah saya praktekkan dan berhasil :D Salam kenal :D
herman said... 28 September, 2010
ok sama2. salam kenal juga :)
Mihawk said... 05 October, 2010
o ya ka herman kalo membuat kayk iklan2 yang ka herman punya yang paling atas tu yang ada gambar nya dan ada tulisan Ads by google gitu .contohnya :

See What's Popular Today
See the Hottest Stories from Twitte Delicious, Reddit Buzz in one Place
www.PopUrls.com
Create Custom Likes
Make your own like statuses featuring albums, books, films etc
likin.gs
Would You Rather?
Be 1 inch tall or eat a live mouse? Be rich or be immune to cold?
would-you-rather.appspot.com

gimana caranya ka herman ?tolong ajarin ya ka herman.
o ya salam kenal ya :D
Anonymous said... 29 October, 2010
ka herman cara membuat tampilan Slide yang bergerak gimana ya ka herman yang isinya gambar gitu. bsa tolong ajarkan ga ka herman.mohon bantuannya ya.
yang cong cheng said... 11 November, 2010
mantra gk berhasil gan yg widget sexy....

mohon petunjuknya.....

www.yangcongcheng.blogspot.com

makasih....
Dunia Intan said... 15 November, 2010
thanks banget juragan bermanfaat pisan
pandu ananda priatna said... 20 December, 2010
keren :D
Fahmi Dz said... 28 January, 2011
mas kalo data post body nya ada 3 gimana ya?
Imam Thoib said... 03 February, 2011
terima kasih mas...
infoinfo unik said... 04 February, 2011
terima kasih sahabat atas infonya,,
Afoed'z said... 08 February, 2011
thanks sob tutorialnya...
Davot Marbun said... 17 February, 2011
This comment has been removed by the author.
Tembang Lawas said... 26 February, 2011
Thank kang dan berhasil =))
zenkadut said... 08 April, 2011
haturnuhun gan,.... like this

http://rasasususegar.blogspot.com/
robi salam said... 10 April, 2011
mantappp...http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

http://robisalam.blogspot.com
HeDoDi said... 13 April, 2011
aturnuhun kang... :)) cek di http://idoodie.blogspot.com , info keren nih! tengkyu yaaa... :X
adhikapraja said... 08 May, 2011
ko tutorialnya beda ya sama yang saya pelajari dari blog lain ? tapi yang ini lebih manjur thank ya !!.... :D
Admin Info Jogjaku said... 24 July, 2011
Makasih infonya mas.
http://dhekarief.blogspot.com
T-Rex said... 10 August, 2011
berhasil,thanks gan ilmunya
Sergie's BLog said... 08 November, 2011
berhasil masbro, thankz infonya...!

http://belajarsistemubuntu.blogspot.com
BitInspiration said... 08 December, 2011
Keren sharingnya...gan....
Icha N Ajah said... 27 March, 2012
keren om :X
PGTK DARUNNAJAH said... 09 April, 2012
mkasih infonya,,,,segera di coba,,,,salam knl
PGTK DARUNNAJAH said... 09 April, 2012
ko ga bisa ya,,,,ga muncul
Adhi Ibra said... 05 May, 2012
thank's tipsnya gan.
Annisa Yustin said... 18 May, 2012
@MihawkKalo nggak salah, pakek Google Adsense ya??
yusrandante said... 04 August, 2012
kunjungan perdana gan..

saya coba prakterkkan dulu sob..
Viralin Blogg said... 19 October, 2012
Maksih gan tutorialnya. mudah2-an barokah. Kalo berkenan, silakan kunjungi blog gado2-ku yaa di sini ==> Fakta On The Spot
Fariqi Azzahid said... 30 November, 2012
terserah kamu, salah satu boleh www.zikei-multimediasite.blogspot.comFahmi Dz

budi arifin said... 25 December, 2012
yang beuty2nya di hapus juga gak?

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment