Facebook Slide Out Share Button Blogger

Sobat blogger tentu sudah tahu Facebook kan? Media sosial paling populer saat ini. Oleh karena itu Facebook menjadi salah satu media paling menarik untuk memasarkan blog sobat. Facebook juga menjadi alat untuk mencari dukungan. Misalnya dengan memasang plugin "Like", "Share", dll. Kali ini kita akan belajar memasang tombol berbagi (share button) Facebook untuk blogger. Share button ini dalam bentuk slide out, yaitu muncul sedikit saja dan bila disentuh barulah keluar semuanya.
Tertarik memasang Facebook Slide Out Share button untuk Blogger blogs?

Tambahkan widget HTML/JavaScript lalu copy-paste code berikut ini.


<b:if cond='data:blog.pageType == "item"'>
    <style>
#fixed-share {background: none repeat scroll 0 0 #4C6699;bottom: 60px;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
    </style>
<div id="fixed-share">
<div id="share-box">
<img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/256/social-facebook-button-blue-icon.png"/>
</div>
<span>Support Us<br/><script>(function(d){ var js, id =
    'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
    d.createElement('script'); js.id = id; js.async = true; js.src =
    "//connect.facebook.net/en_US/all.js#xfbml=1";
    d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script>  <fb:share-button expr:href='data:post.url'
    type='button_count'/> </fb:share-button>
</span></div>
</b:if>

Selamat belajar :)

Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template