Cara Pasang Share Button Sexy

Cara Pasang Share sexy di Blog, pada artikel yang lalu yakni 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 sobat Blogger lain yang bahas, tapi beberapa teman pemula masih juga menanyakan pada saya terutama lewat pesan di Facebook, beliau-beliau ini bilang masih belum ngerti karena penjelasannya rumit dan bukan untuk pemula... hahaa.. padahal saya sendiri juga Newbie Bro.
Kebanyakan juga Tidak menemukan Tutorialnya karena kata kunci yang dimasukkan di google salah.
Baiklah Tanpa mengurangi Rasa Hormat pada sobat Blogger yang duluan memberikan tutorialnya. Mari kita Mulai memasangnya

1. Silahkan Login dengan akun Blogger Sobat.
2. Masuk ke Tata Letak | Edit HTML | Centang Expand Template Widget/li>
   
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 sobat yang mau meletakkan di bawah <data:post.body/> tapi sudah pasang Readmore silahkan letakkan Code berikut di bawah <data:post.body/> ke dua
   Ingat Letakkan Dibawahnya ya.
   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/sinarabadifc' 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 sinarabadifc ( tulisan warna merah ) dengan ID Feedburner Anda
   
7. Silahkan di Simpan dan dilihat Hasilnya

Posted in: TUTORIAL BLOG