Minggu, 11 Agustus 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdssvVWi08Vodh-ykHCA3OaVGmL5cJRxWuTx_zC5rbIWxER7Lounq4lr4I_mLhMk81IpLz98NeqOQnJMGho3JoeUesNkHcdeOhDKA3oz6JQ7v9oVHdQ_Rl3AkXTNDLmbKA2xwKB2maPPM/) no-repeat left bottom;

position:relative;

width:540px;

}

.sexy-bookmarks span.sexy-rightside {

width:17px;

height:54px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdssvVWi08Vodh-ykHCA3OaVGmL5cJRxWuTx_zC5rbIWxER7Lounq4lr4I_mLhMk81IpLz98NeqOQnJMGho3JoeUesNkHcdeOhDKA3oz6JQ7v9oVHdQ_Rl3AkXTNDLmbKA2xwKB2maPPM/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUaJ_B5y9FRSHb8dvccsq23CGtygD6e7DUNYWRXCL1rMhzX_aIzmrGkFqU1w_GhYe9t7IDQHpy1lqonagKJsdNMkxe8nFfaJW8urNB8jDhUTVYZGtwSvawfXQ1zjDeruVXOpv-tnCBMc/) 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

Related Posts by Categories

0 komentar:

 
Android Live - Powered By Blogger