Cara Membuat Dan Memasang Tombol Sharing Is Sexy Di Blog

 Cara Membuat Dan Memasang Tombol Sharing Is Sexy Di Blog - Selamat untuk sobat kucopas, Karena sobat masuk pada pilihan yang tepat untuk mencari artikel posting tentang Cara Membuat Dan Memasang Tombol Sharing Is Sexy Di Blog atau Cara Memasang Tombol Share Di Bawah Posting Blog.

 Pada artikel yang sebelumnya saya sudah share posting tentang Cara Membuat Animasi Berjalan Di Bagian Bawah Blog, Dan kali ini saya akan share lagi seputar tutorial blog, Yaitu tentang Cara Membuat Dan Memasang Tombol Share Keren Di Bawah Posting Blog, khususnya Cara Membuat Dan Memasang Tombol Sharing Is Sexy Di Blog.

 Fungsi dari Tombol Sharing Is Sexy yang di pasang di blog sangat banyak sekali, Salah satunya adalah jika sobat memasang tombol Sharing is Sexy diblog, Maka akan dapat sangat memudahkan para pengunjung blog untuk mengirim atau share artikel blog sobat ke berbagai Social Bookmark seperti Facebook, Google+,  Twitter, Digg dan lain sebagainya.

 Tampilan dari Tombol Sharing Is Sexy sangatlah sexy seperti namanya, Karena tombol share yang berikut ini mempunyai tampilan yang menggunakan efek show hidden. Dan efeknya akan kelihatan jika mouse pointer menyentuh tombol sharing is sexy tersebut. Silahkan sobat lihat contohnya langsung pada blog DEMO KUCOPAS.

DEMO

Oke sobat kita langsung saja menuju Cara Buat Tombol Sharing is Sexy di Blog, silahkan sobat ikuti langkah-langkah nya di bawah ini :

1. Silahkan sobat langsung >> "Masuk atau Login" Ke Blogger.com mengguakan akun sobat.

2. Pada Dashboard blogger tampilan baru, Kemudian sobat pilih Menu >> "Template". Klik Cadangkan/Pulihkan >> Download Template lengkap. Guna untuk berjaga-jaga jika ada kesalahan saat edit template, Agar sobat masih bisa mengembalikan template blog sobat seperti semula.

3. Langkah selanjutnya sobat klik >> "EDIT HTML".

4. Lalu jangan lupa sobat >> Centang "Expand Widget Template".

5. Kemudian sobat cari Kode >> ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).

6. Jika sudah ketemu, Silahkan sobat letakan semua Kode yang berwarna BIRU di bawah ini tepat setelah atau di bawah Kode ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.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://img406.imageshack.us/img406/9198/sexyy.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 }
</style>

7. Masih dalam Edit HTML, Selanjutnya silahkan sobat cari lagi Kode <data:post.body/> (Gunakan CTRL+F lagi untuk mempercepat pencarian).

8. Jika sudah ketemu, Kemudian sobat letakkan semua Kode di bawah ini tepat setelah atau di bawah Kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><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://feeds.feedburner.com/blogspot/ZqAec' 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></b:if>

Catatan:

• Jika pada template blog sobat menggunakan "ReadMore", Mungkin sobat akan menemukan ada beberapa kode <data:post.body/>, Biasanya lebih dari dua hingga empat. Saran saya, Silahkan sobat tempel kode scriptnya dibawah kode <data:post.body/> yang ke dua.

9. Sebelum sobat klik >> Simpan, Silahkan klik >> "Preview/Pratinjau", Demi untuk menghindari kesalahan saat Edit HTML.

9. Jika hasil "Preview/Pratinjau" template blog sobat tidak mengalami eror, Silahkan sobat klik >> "Save/Simpan".

10. Selesai dan lihat hasilnya pada setiap halaman posting blog sobat, Di bawahnya sudah terpasang Tombol Sharing Is Sexy.

NB:
- Silahkan sobat atur dan edit penerapan kodenya, Agar sesuai dengan template blog sobat, Karena penerapan dan pemasangan kode script mungkin bisa berbeda untuk setiap template blog.

- Menurut pengalaman saya dalam memasang Tombol Sharing is Sexy di Blog sangat mudah, Karena saya hanya ikuti tutorial di atas dan berhasil, Contohnya bisa sobat lihat di blog DEMO KUCOPAS. Lihat contoh di bawah postingan.

 Semoga artikel posting tentang Cara Membuat Dan Memasang Tombol Sharing Is Sexy Di Blog, Bisa sangat bermanfaat untuk sobat KUCOPAS semua.

HapPy BLog9inG...

---

| Supported by http://kuc0pas.blogspot.com |

---