Cara Pasang Widget Sharing Is Caring/Sexy di Blogger

sharing is caring blogger widget
Share posting ke beberapa social bookmark maupun social media lain merupakan hal penting untuk promosi blog dan artikel blog. Menyediakan tool untuk pengunjung agar lebih mudah melakukan sharing membuat mereka mudah melakukannya. Salah satu bookmarking widget yang cukup menjadi favorit adalah "Sharing is caring/sexy bookmarking widget", karena tampak atraktif dan animatif sehingga dapat menjadi nilai plus juga untuk desain blog.

Widget ini banyak ditemui dan dishare oleh banyak blog. Sebagian menggunakan javascript/jquery library, yang memang tampak lebih animatif. Namun kekurangannya, waktu load yang dibutuhkan lebih lama. Sehingga bagi blog yang sudah terlalu banyak menggunakan javascript, widget ini dapat menambah beban/berat blog dan membuat waktu load lebih panjang. Untuk versi widget sharing is caring ini, saya melakukan beberapa modifikasi pada jenis button bookmark apa saja yang digunakan dan juga menggunakan CSS sprite (image sprite) garapan CSSReflex tanpa javascript/jquery.
  • Demo 1 (Sharing is caring): lihat di bawah
  • Demo 2 (Sharing is sexy): Click here

Cara Memasang Widget Sharing is Caring/Sexy di Blogger

Widget bookmark sharing blogger ini akan ditampilkan di bawah posting blog.
1. Masuk ke dashboard > template > Edit HTML
2. Centang 'Expand Widget Templates'. Jika perlu, backup template terlebih dahulu.
3. Cari </head> (Ctrl+F), letakkan kode CSS berikut tepat di atasnya.

<!--sharing-sexy-buka-rahasia.blogspot.com-starts-->
<style type='text/css'>
div.beauty-bookmarks {height:54px;background:url(&#39;http://3.bp.blogspot.com/-hqoa_YwhA2A/T5Yb2iSK_lI/AAAAAAAABdY/ASy95CIaVa8/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat left top;position:relative;width:540px;}
div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url(&#39;http://3.bp.blogspot.com/-hqoa_YwhA2A/T5Yb2iSK_lI/AAAAAAAABdY/ASy95CIaVa8/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat right top;position:absolute;right:-17px;}
div.beauty-bookmarks ul.socials {margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;}
div.beauty-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.beauty-bookmarks ul.socials a {display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url(&#39;http://2.bp.blogspot.com/-lDppcTd-d5w/T5Yb5aJ_anI/AAAAAAAABdg/qw_3bh0X3NA/s1600/bukarahasia-sexysprite.png&#39;) no-repeat !important;}
.beauty-furl {background-position:-300px top !important;}
.beauty-furl:hover {background-position:-300px bottom !important;}
.beauty-digg {background-position:-500px top !important;}
.beauty-digg:hover {background-position:-500px bottom !important;}
.beauty-reddit {background-position:-100px top !important;}
.beauty-reddit:hover {background-position:-100px bottom !important;}
.beauty-stumble {background-position:-50px top !important;}
.beauty-stumble:hover {background-position:-50px bottom !important;}
.beauty-delicious {background-position:left top !important;}
.beauty-delicious:hover {background-position:left bottom !important;}
.beauty-yahoo {background-position:-650px top !important;}
.beauty-yahoo:hover {background-position:-650px bottom !important;}
.beauty-blinklist {background-position:-600px top !important;}
.beauty-blinklist:hover {background-position:-600px bottom !important;}
.beauty-technorati {background-position:-700px top !important;}
.beauty-technorati:hover {background-position:-700px bottom !important;}
.beauty-myspace {background-position:-200px top !important;}
.beauty-myspace:hover {background-position:-200px bottom !important;}
.beauty-twitter {background-position:-350px top !important;}
.beauty-twitter:hover {background-position:-350px bottom !important;}
.beauty-facebook {background-position:-450px top !important;}
.beauty-facebook:hover {background-position:-450px bottom !important;}
.beauty-mixx {background-position:-250px top !important;}
.beauty-mixx:hover {background-position:-250px bottom !important;}
.beauty-script-style {background-position:-400px top !important;}
.beauty-script-style:hover {background-position:-400px bottom !important;}
.beauty-designfloat {background-position:-550px top !important;}
.beauty-designfloat:hover {background-position:-550px bottom !important;}
.beauty-syndicate {background-position:-150px top !important;}
.beauty-syndicate:hover {background-position:-150px bottom !important;}
.beauty-email {background-position:-753px top !important;}
.beauty-email:hover {background-position:-753px bottom !important;}
</style>
<!--sharing-sexy-buka-rahasia.blogspot.com-ends--> 
Kostumisasi CSS:
Secara default, CSS di atas saya set untuk menampilkan quote "sharing is caring". Untuk mengubah menjadi "sharing is sexy", perhatikan pada bagian CSS background positioning di atas yang saya tandai dengan warna biru: ganti left top dengan left bottom, dan right top dengan right bottom.

4. Cari <data:post.body/> (Ctrl+F), paste kode berikut TEPAT setelah/dibawahnya:

<!--sharing-widget-buka-rahasia.blogspot.com-starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-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='beauty-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='beauty-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='beauty-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='beauty-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='beauty-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='beauty-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='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<li class='beauty-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='beauty-syndicate'><a href='http://feeds.feedburner.com/blogspot/bukarahasia' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>
<!--sharing-widget-buka-rahasia.blogspot.com-ends-->

Ganti http://feeds.feedburner.com/blogspot/bukarahasia dengan url feedburner blogmu.
5. Save templates.

Done, sekarang tinggal ajak pengunjung untuk memanfaatkan bookmark sharing widget tersebut.
Credits and thanks to CSSReflex for the beautiful CSS Sprite!

Cara Pasang Widget Sharing Is Caring/Sexy di Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 38 Comment(s):

Slim Shady said...

Asslmlkum gan,
sblumnya minta maaf prtnyaan saya mnyimpang dari postingan diatas.
Kalo cara bikin kursor custom gimana yah?
Saya udah upload fto di ImageShack®,kodenya udah dapet.
Tapi kodenya di taruh dimana yah?
Mohon bantuanya.
Terima kasih.

andipandora said...

makasih infonya mas...tapi bikin berat ga ya?

Anonymous said...

Ah, mas asmi ini telaaaaaat. saya sudah punya widgetnya. Padahalal ya mas asmi. Sy gak pernah lakuin pencarian google karena saking cintanya saya sama tutor mas asmi.

Ahmad Khoirul Azmi said...

@Anonymous: Wah... diedit aja, ganti aja sama yang di atas :)

Ahmad Khoirul Azmi said...

@SlimShaddy alias eminem:
Waalaikum salam
Custom cursor mana yang sobar pake? saya gak jelas kalo ga tau scriptnya

Anonymous said...

Reply : iya mas. tapi males ah ganti-nya. Satu lagu mas, gini, katanya beredar kabar kalo kita hapus linkbeck perancang template, misalkan dicasblogger seperti punya mas. Katanya kalo di hapus blog kita bakal gak diterima adsense, betul gak mas. Emang apa hubungannya?

Ahmad Khoirul Azmi said...

copyright, hak cipta. google tidak menyukai dan mengaprove konten2 web/blog web yang melanggar hak cipta. termasuk menghilangkan atribusi template apabila pembuat template mewajibkan itu dilampirkan, penghargaan terhadap hak cipta dan karya orang itu penting. selain itu konten2 berkualitas rendah jg sulit diterima. originalitas dan kualitas penting karena itu menentukan kualitas klik iklan. ingat bukan jumlah, tapi kualitas (mengacu pada CTR, CPC, dan RPM). Bahkan ketika anda menggunakan template dengan kostumisasi yang MIRIP dengan kostumisasi yang telah dibuat orang lain/pada blog lain, karena kostumisasi itu memang sengaja dibuat agar unik, seharusnya juga melampirkan atribusi, itu etikanya.
Oya, soal adsense, saya tidak menggunakan blog ini untuk melakukan lamaran, tetapi menggunakan beberapa website saya yang lain (TLD), dan sudah lama itu. kemungkinan diterima dengan melamar lewat blogspot, 0,01%

Chandraxz said...
This comment has been removed by the author.
Chandraxz said...

kalo data:post.body nya ada 4 scriptnya naruhnya di data:post.body yang ke berapa?

Ahmad Khoirul Azmi said...

pilih yang pertama atau kedua saja, coba salah satu.

Anonymous said...

Mas AKA, kalau blog walking apa sih maksudnya? dan dimana saja tempat mas AKA biasa Blogwalking?

Chandraxz said...

kalo cara pasang widget yang dibawah Sharing Is Caring/Sexy itu gimana? dan cara pasang iklan yang agan gunakan gimana? mohon pencerahnya

Ahmad Khoirul Azmi said...

iklan yang saya pasang itu adsense. kalo yang banner iklan biasa lihat disini:
http://buka-rahasia.blogspot.com/2012/01/cara-membuat-kotak-space-iklan-125-x.html

trik RPP PAI said...

bang ada yang singkat ga...jangan sampai memperlambat loading blog...

cara kirim article said...

kalau widget sharing umumnya sangat membantu memperkenalkan web kita di akun jejaring sosial...maksih

pertamaxxx said...

nice info, keep posting bro
http://www.centplay.com/affiliate/id_1190/

Fuji Angung Prasetya said...

Waduh panjang amat ya hihihi,...

makasih banyak om infonya, izin praktek ya... :)

LintasArtikel dot in said...

makasih sob....... hang out hang out :D kapan hang out nya

Muklas Putra said...

mas klw buat iklan adsense tu gmn byar tah.. ne hub q 08970519421

Cars Specs said...

ijin comot gan.. dah ane pasang & sukses.. thank's you..

Favo Perdana said...

Terima kasih atas scriptnya kak Azmi, sudah berhasil di blog saya

Chandraxz said...

gan bisa daftarin ane ke adsennse

Jusman Amin said...

tutorialnnya bagus, 100% bekerja

FirmaN aLex ( admin ) said...

gan.. kalau salah satu menu pada sharing is sexy itu ada dibawahnya. bagaimana solusinya ?

jumlah menunya ada 11 dlm 1 baris. kalau saya cm ada 10 dan menu satunya lagi ada dibawahnya.. itu bagaimana gan ?

thanks.

obat herbal penykit jantung said...

patut dicoba gan makasih

obat herbal stroke said...

tanks gan jadi penasaran hasilnya kaya apa

Online Cerdas Internet positif said...

Wah kodenya banyak amir..nambahin berat ke loding blog gak ya?

NINGSIH said...

gan kenapa gak muncul muncul sih sharing nya mohon dibahas sedikit

Admin NightFire said...

gan, kalo pengguna read more otomatis, data post body nya yg mana gan? punya ane ada 3 gan,

Abey Lesmana said...

Mas kok di blog saya gak muncul sih , apa yang salah yah ?

Andi Hidayat said...
This comment has been removed by the author.
Andi Hidayat said...

kok nggak muncul ya mas,.?
kira2 kenapa,.?

Bhernadin Erryco said...

Teman, saya mau tanya..
kok kode yang saya ada 3..
trus solusinya gimana?

AriOutsider96 said...

Templete ane ada 4
Gimana nie ane udah pasang di masing masing tetep ga keluar

zaenal mutaqin said...

maaf bos, saya sudah coba ikuti langkah-2nya tp kok masih utuh, trs url feedburner yang diganti maksudnya gmn???

korchiez said...

permisi gan, saya mau tukar link bisa gk?
nih blog saya ,, tolong dibuka disitu ada link saya plus bannernya http://blogfredy.wordpress.com">
tolong di backlink ya gan..

didik ismanto said...

kerent banget, banyak belajar dari blog ini, mohon bimbingannya.. salam sukses

tipsdan trik said...

To Mas Azmi YTH,

mohon penceranya, sebelumnya yang ingin saya tanyakan
apakah widget sharing sexy ini bisa berfungsi di semua template?

saya sudah coba dan berhasil, namu saya tidak menemukan perubahan pada blog saya mas..

mohon pencerahannya, karena saya masih baru belajar dunia blogger..

best regards

firzailhampratomo@gmail.com

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap