Cool Shareaholic Social Sharing Widget Dengan Tooltips Dan Count Untuk Blogger

Cool Shareaholic Social Sharing Widget Dengan Tooltips Dan Count Untuk Blogger!
Shareaholic.com adalah salah satu situs terkemuka dalam membuat tombol berbagi untuk wordpress, tumblr atau website kecuali blogger.
Jadi di sini saya akan memberikan instalasi penuh untuk blogger. Ini adalah gadget keren dengan menampilkan tooltips dan Count untuk menunjukkan bahwa bagaimana berkali-kali posting Anda telah di shared.
Sebelumnya Oto Website juga pernah membahas widget yang hampir sama ya itu : Memasang Tombol Sharing Is Sexy Jquery Auto Hide. Perbedaannya hanya widget tersebut tidak bekerja degan tooltip dan count.
Untuk instalasi Cool Shareaholic Social Sharing Widget Dengan Tooltips Dan Count Untuk Blogger ini juga sangatlah mudah.

Gadget Priview

---

Cara Menginstal

---

Seperti yang saya bilang di atas untuk menginstal widget ini juga sangatlah mudah, ikuti petunjuk berikut untuk mulai melakukan instalasi ke blogger Anda.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup template Anda.

4. Selanjutnya dalam Edit HTML temukan kode ]]></b:skin> (Bila kesulitan mencari kode HTML klick DISINI)

5. Lalu letakkan kode css berikut tepat di atas kode tadi

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

6. Masih dalam Edit HTML, sekarang temukan kode <div class='post-footer'> dan letakkan kode berikut tepat di atasnya.

Keterangan: 
Anda juga dapat meletakkan kode di bawah ini di bawah kode <data:post.body/> (Bila ada kode <data:post.body/> lebih dari dua ,maka pilih yang ke dua)

<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @otowebsite"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.otowebsite.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>

Keterangan:
Ganti teks @otowebsite dengan username twitter Anda.

7. Selanjutnya klick Simpan template.

Sekarang Anda dapat melihat hasilnya pada blog Anda.

---

Ada Masalah Instalasi ?

---

Jika Anda menemukan masalah dalam Instalasi Cool Shareaholic Social Sharing Widget Dengan Tooltips Dan Count Untuk Blogger jangan sungkan untuk bertanya, saya akan dengan senang hati membantu Anda. Salam Blogger!