Memasang Tombol Sharing is Sexy pada Posting Blog

Ini adalah tombol share terunik yang pernah saya coba. Contohnya bisa anda lihat di bawah posting artikel ini. Tampak baris icon tombol yang memperlihatkan bentuknya cuma separuh saja.

Jika anda mengarahkan kursor ke salah satu icon share nya, maka icon yang anda pilih tersebut akan keluar dari persembunyiannya.

Menarik bukan? Langsung saja ke TKP.

Login ke account blog anda.
Klik rancangan
Klik Edit Html,
Centang expand widget template
Cari kode ]]></b:skin>
Masukkan kode css dibawah tepat diatas kode ]]></b:skin>


.sexy-bookmarks {

height:54px;

background:url('http://lh6.ggpht.com/_mWNaJ9OwpbA/TKLGOSD-T7I/AAAAAAAAA00/mt2Y587CNA4/2ueii3t.png') no-repeat left bottom;

position:relative;

width:540px;

}

.sexy-bookmarks span.sexy-rightside {

width:17px;

height:54px;

background:url('http://lh6.ggpht.com/_mWNaJ9OwpbA/TKLGOSD-T7I/AAAAAAAAA00/mt2Y587CNA4/2ueii3t.png') no-repeat right bottom;

position:absolute;

right:-17px;

}

.sexy-bookmarks ul.socials {

margin:0 !important;

padding:0 !important;

position:absolute;

bottom:0;

left:10px;

}

.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;

}

.sexy-bookmarks ul.socials a {

display:block !important;

width:48px !important;

height:29px !important;

font-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://lh6.ggpht.com/_mWNaJ9OwpbA/TKLGOfeWt-I/AAAAAAAAA0w/9M3ycOOA0Qo/1znbj83.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-yahoo:hover {

background-position:-650px bottom !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;

}

Setelah itu, cari lagi kode <div class='post-footer'>
Kemudian Masukkan kode di bawah ini Tepat di atas <div class='post-footer'> :

<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;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/meambo' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow'/></li>

</ul>

<span class='sexy-rightside'/></div>
Jika cara tersebut tidak bisa, mungkin karena anda memasang READ MORE pada halaman posting anda. Kalau demikian cobalah cara beikut ini. Carilah kode <data:post.body/>. Tenang, kode berikut memang ada 3 buah. Coba letakkan kode di atas tepat setelah kode <data:post.body/> yang kedua
 
Jika sudah selesai, SAVE template, dan lihat hasilnya.




GOODLUCK

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

4 comments

November 16, 2011 at 3:13 AM

Gan udah ane coba kok gak bisa ya? bikin bingung nih....

December 6, 2011 at 7:45 PM

waduh gan. perasaan itu sudah bener kok tutornya. :)
coba lebih teliti lagi, soalnya saya sendiri berhasil kok. :)
sebelum mencoba centang dulu HTMLnya, terus jangan lupa download template lengkap ya buat jaga-jaga :)

buktinya tombol share is sexy saya pasang di setiap artikel blog saya.
sukses selalu gan :)

February 7, 2012 at 7:13 AM

siap gan... meluncur ke TKP..
:))

March 28, 2012 at 1:06 PM

Hahaha I LIKE THIS

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.