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.

Social Share Melayang

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>

Baca Juga:  Membuat Website Hanya 5 Menit

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.

Yuk bantu share. Semoga jadi amal jariyah dengan ikut berbagi ilmu bermanfaat ini. Aamiin.
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Pin on Pinterest
Pinterest
Share on Tumblr
Tumblr
Share on LinkedIn
Linkedin

3 Responses

  1. author

    Asoy Lestari indonesia tour & travel2 years ago

    gan kok saya jarak fb sama google plus nya malah jauh yah kepisah gitu

    Reply
  2. author

    Admin2 years ago

    Ok, terimakasih sudah memberitahu. nanti saya priksa dulu kodenya lagi. Tunggu update selanjutnya ya gan.

    Reply
  3. author

    Admin2 years ago

    Saya sudah perbaiki. Silakan lihat solusinya. Terimakasih

    Reply

Leave a Reply