Cara Pasang Share Button dengan Sharing is Sexy

Oleh: Pada: 21 Februari, 2015

Membuat tombol bagikan ke facebook twitter sosial media – Hai sobat blogger semuanya yang lagi yang menjalnkan ibadah puasa, dari pada saya nganggur nunggu bedug tiba saya lebih baik posting untuk para blogger yang pengen pasang tombol berbagi kalau anak gaul bilang share button, oke saya jelasi manfaat dari share button ini yang saya ketahui share button adalah untuk membagikan artikel kita ke berbagai situs/website yang populer seperti facebook, twitter, e-mail google/yahoo, blogger, dig, dan masih banyak lagi situs yang di jadikan ajang numpang artikel kita, dengan kita mengshare ke berbagai situs, maka harapan artikel kita untuk dibaca banyak orang akan lebih besar dan itu akan bermanfaat untk blog/website kita, seandainya orang tertarik dengan artikel kita dan orang itu mengshare ke teman-temannya, bayang kan kalau semuanya mengshare maka blog/web kita akan kebanjiran pengunjung, kayaknya langsng aja dech kita ke lokasi pembuatannya gak usah banyak cing-cong lagi.

Langkah 1
Silahkan login ke blogger.
Kemudian klik tab Edit HTML.
Klik Expand Template Widget.

Langkah 2
Copy kode di bawah ini setelah kode ]]></b:skin>

div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }

div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }

div.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 }

div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-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://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.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 }

Langkah 3
Setelah itu cari kode seperti ini: <data:post.body/>
biasanya kalau kita pake readmore kode seperti di atas ada dua.

copas kode dibawah ini tepat dibawah kode: <data:post.body/> yang pertama atau yang kedua sampe bener-bener pas.

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

Jangan lupa ganti feedburnernya dengan feedburner blog kamu (http://feeds2.feedburner.com/niammuddin)

Simpan Template dan lihat hasilnya.

Peringatan! untuk mencegah terjadinya kesalahan kamu backup dulu template kamu, supaya nanti kalu ada kesalahan kamu bisa restore kembali.

Selamat mencoba 🙂

Artikel ini diupdate pada hari ini 06 juli 2012