October 5, 2016

Cara Menambahkan Tombol Berbagi Melayang Disamping Kiri atau Kanan Artikel Blog

Cara Menambahkan Tombol Berbagi Melayang Disamping Kiri atau Kanan Artikel Blog - Tombol berbagi merupakan suatu keharusan yang ada pada setiap artikel kita, guna agar kita dapat mempublish artikel melalui sosial media tersebut. Hal ini tentu saja sangat menguntungkan, apalagi jika Anda telah memiliki follower yang banyak. Otomatis artikel yang Anda publish, lebih memungkinkan untuk di baca oleh banyak orang dan pengunjung blog Anda akan meningkat. Setelah selalu mengalami peningkatan, seiring berjalannya waktu maka artikel Anda akan muncul di halaman depan pencarian Google. Itu merupakan impian semua blogger pemula maupun profesional blogger.

Jika Anda menggunakan template bawaan blogger, sebenarnya telah tersedia tombol share bawaan blogger. Namun mungkin, dari segi penampilannya kurang menarik, untuk itulah mungkin Anda browsing kesana kemari untuk mencari berbagai macam model tombol berbagi. Ada tombol berbagi yang terdapat di atas artikel, ada juga yang biasa di bawah artikel dan yang lebih menarik lagi, tombol berbagi melayang di samping kiri dan kanan artikel. 

Cara Menambahkan Tombol Berbagi Melayang Disamping Kiri atau Kanan Artikel Blog

Jika Anda tertarik untuk mencoba membuat tombol berbagi disamping artikel, berikut langkah - langkahnya :

  1. Login ke dashboard blogger
  2. Klik Tata Letak
  3. Add Gadget
  4. Pilih HTML/JavaScript
  5. Masukan kode di bawah ini pada kotak yang muncul

<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>
Terakhir setelah Anda yakin akan menempatkan tombol share tersebut di samping kiri maka jangan lupa untuk di simpan. Namun jika ingin mengganti posisinya kesebelah kanan, Anda dapat mengganti tulisan yang diberi warna biru dengan " right ". Lalu simpan.

Demikian cara membuat tombol berbagi melayang di samping kiri atau kanan blog, yang saya peroleh dari Seocips.com. Semoga bermanfaat.

Sumber : http://www.seocips.com/2016/05/cara-membuat-widget-sosial-share-melayang-disebelah-kiri-blog.html