Cara Memasang Social Share Melayang di Pinggir Halaman Blog

Punya blog supaya populernya cepat maka harus dibagikan ke berbagai media. Misalnya saja media yang gratisan seperti media sosial. Lewat media sosial blog kita bisa menjadi banyak pengunjungnya. Blog kita bisa saja disebarkan oleh pengunjung tanpa diminta. Sering kita menemukan tombol-tombol sosial media pada halaman blog. Maksudnya itu dipasang agar pembaca bisa membagikannya dengan mudah, tinggal klik, mereka sudah bisa langsung membagikannya.

Ada beberapa cara menempelkan social share, yaitu bisa menempelkannya di dalam tubuh template blog, dan menempelkannya di widget blog. Dalam kesempatan ini saya berikan cara menempelkan social share ke dalam widget blog yang nantinya tombol-tombol social share tersebut melayang di sebelah kiri blog. Kira-kira seperti ini tampilannya tombol social share melayang yang dimaksud.

Cara memasang widget social share melayang ini mudah dilakukan, Anda bisa langsung menempelkannya ke dalam widget java script. Silakan tambahkan wiget java script dalam tata letak blog.

Kemudian silakan copy dan paste kode social share melayangnya di bawah ini ke dalam widget java script tadi lalu save dan lihat hasilnya.

<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div><div style="font-size: 60%; text-align: right;"><small><a href="bit.ly/28LgMPV" target="_blank" title="widget recent comment">Get This Widget</a></small></div>


Kalau memang kode di atas tidak sesuai dengan template blog Anda, saya punya solusi lain yaitu dengan memanfaatkan Addthis. Addthis merupakan website yang memberikan solusi mudah menempelkan tombol media sosial. Dapatkan Addthis secara gratis. Anda bisa letakkan social share di mana saja dalam blog kesayangan. Silakan temukan Addthis lewat mesin penelusur seperti google.com atau bing.com dan lakukan registrasi untuk mendapatkan kodenya.

Apabila masih ada yang kurang dimengerti, silakan menanyakan langsung di kolom pertanyaan di bawah ini. Insya Allah saya akan langsung menanggapinya. Terimakasih.

Tweet