Cara Pasang Share sexy di Blog

Pada artikel sebelumnya adalah Cara Pasang Share Button pada blog, Share this ini milik Addthis, Nah kali ini Tampilan Share button lebih Cantik keren dan Sexy, namanya saja Share Is Sexy. Contoh Bisa dilihat dibawah Artikel ini.

Sebenarnya cara pasangnya sudah banyak teman2 Blogger lain yang bahas, tapi ga apa-apalah mana tahu ada teman pemula yang mau pasang diblognya masing-masing.
Baiklah Tanpa mengurangi Rasa Hormat pada teman Blogger yang duluan memberikan tutorialnya. Mari kita Mulai memasangnya... yup!

1. Silahkan Login dengan akun Blogger Sobat.
2. Masuk ke Tata Letak | Edit HTML | Centang Expand Template Widget
3. Tekan(Ctrl + F) lalu cari kode ini : ]]></b:skin>
   Agar lebih mudah Copy code tersebut lalu pastekan di kolom
4. Sekarang Silahkan Copy dan Pastekan Code berikut di bawah ]]></b:skin>

<br /> <span style="color: blue;"><style type='text/css'></span><br /> <span style="color: blue;"> div.sexy-bookmarks {</span><br /> <span style="color: blue;"> height:54px;</span><br /> <span style="color: blue;"> background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat left bottom;</span><br /> <span style="color: blue;"> position:relative;</span><br /> <span style="color: blue;"> width:540px;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> div.sexy-bookmarks span.sexy-rightside {</span><br /> <span style="color: blue;"> width:17px;</span><br /> <span style="color: blue;"> height:54px;</span><br /> <span style="color: blue;"> background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat right bottom;</span><br /> <span style="color: blue;"> position:absolute;</span><br /> <span style="color: blue;"> right:-17px;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> div.sexy-bookmarks ul.socials {</span><br /> <span style="color: blue;"> margin:0 !important;</span><br /> <span style="color: blue;"> padding:0 !important;</span><br /> <span style="color: blue;"> position:absolute;</span><br /> <span style="color: blue;"> bottom:0;</span><br /> <span style="color: blue;"> left:10px;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> div.sexy-bookmarks ul.socials li {</span><br /> <span style="color: blue;"> display:inline-block !important;</span><br /> <span style="color: blue;"> float:left !important;</span><br /> <span style="color: blue;"> list-style-type:none !important;</span><br /> <span style="color: blue;"> margin:0 !important;</span><br /> <span style="color: blue;"> height:29px !important;</span><br /> <span style="color: blue;"> width:48px !important;</span><br /> <span style="color: blue;"> cursor:pointer !important;</span><br /> <span style="color: blue;"> padding:0 !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> div.sexy-bookmarks ul.socials a {</span><br /> <span style="color: blue;"> display:block !important;</span><br /> <span style="color: blue;"> width:48px !important;</span><br /> <span style="color: blue;"> height:29px !important;</span><br /> <span style="color: blue;"> font-size:0 !important;</span><br /> <span style="color: blue;"> color:transparent !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .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 {</span><br /> <span style="color: blue;"> background:url('http://YOUR-IMAGE-HOSTING/sexysprite.png') no-repeat !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> </span><br /> <span style="color: blue;"> .sexy-furl {</span><br /> <span style="color: blue;"> background-position:-300px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-furl:hover {</span><br /> <span style="color: blue;"> background-position:-300px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-digg {</span><br /> <span style="color: blue;"> background-position:-500px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-digg:hover {</span><br /> <span style="color: blue;"> background-position:-500px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-reddit {</span><br /> <span style="color: blue;"> background-position:-100px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-reddit:hover {</span><br /> <span style="color: blue;"> background-position:-100px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-stumble {</span><br /> <span style="color: blue;"> background-position:-50px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-stumble:hover {</span><br /> <span style="color: blue;"> background-position:-50px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-delicious {</span><br /> <span style="color: blue;"> background-position:left top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-delicious:hover {</span><br /> <span style="color: blue;"> background-position:left bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-yahoo {</span><br /> <span style="color: blue;"> background-position:-650px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-yahoo:hover {</span><br /> <span style="color: blue;"> background-position:-650px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-blinklist {</span><br /> <span style="color: blue;"> background-position:-600px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-blinklist:hover {</span><br /> <span style="color: blue;"> background-position:-600px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-technorati {</span><br /> <span style="color: blue;"> background-position:-700px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-technorati:hover {</span><br /> <span style="color: blue;"> background-position:-700px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-myspace {</span><br /> <span style="color: blue;"> background-position:-200px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-myspace:hover {</span><br /> <span style="color: blue;"> background-position:-200px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-twitter {</span><br /> <span style="color: blue;"> background-position:-350px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-twitter:hover {</span><br /> <span style="color: blue;"> background-position:-350px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-facebook {</span><br /> <span style="color: blue;"> background-position:-450px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-facebook:hover {</span><br /> <span style="color: blue;"> background-position:-450px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-mixx {</span><br /> <span style="color: blue;"> background-position:-250px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-mixx:hover {</span><br /> <span style="color: blue;"> background-position:-250px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-script-style {</span><br /> <span style="color: blue;"> background-position:-400px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-script-style:hover {</span><br /> <span style="color: blue;"> background-position:-400px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-designfloat {</span><br /> <span style="color: blue;"> background-position:-550px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-designfloat:hover {</span><br /> <span style="color: blue;"> background-position:-550px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-syndicate {</span><br /> <span style="color: blue;"> background-position:-150px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-syndicate:hover {</span><br /> <span style="color: blue;"> background-position:-150px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-email {</span><br /> <span style="color: blue;"> background-position:-753px top !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> .sexy-email:hover {</span><br /> <span style="color: blue;"> background-position:-753px bottom !important;</span><br /> <span style="color: blue;"> }</span><br /> <span style="color: blue;"> </span><br /> <span style="color: blue;"> </style></span>

5. Selanjutnya cari lagi kode <div class='post-footer'> atau <data:post.body/> dan bagi teman yang mau meletakkan di bawah <data:post.body/> tapi sudah pasang Readmore silahkan letakkan Code berikut di bawah <data:post.body/>  
Ini Kodenya :

<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/Ayods' 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>

6. Silahkan Ganti Ayods ( tulisan warna merah )dengan ID Feedburner Anda
7. Silahkan di Simpan dan dilihat Hasilnya 

Semoga bermanfaat...

Baca Juga