Cara Membuat Widget Sosial Media Share Melayang 2017

Cara Membuat Widget Sosial Media Share Melayang

Add Comment

Friday, September 23, 2016

ELANGEE -  Cara Membuat Widget Sosial Media Share Melayang. Pasti sudah tidak asing lagi saat mendengar Media Sosial Widget yang bisa menambah jumlah visitor blog, terutama kalian pengguna Facebook, Google+ dan sebagainya. Mungkin sudah banyak yang tahu cara membuatnya...atau mungkin juga ada sebagian yang belum tahu. Maka dari itu saya ingin berbagi kepada kalian bagaimana "Cara Membuat Widget Sosial Media Share Melayang Di Sebelah Kiri Blog."

Hasilnya akan seperti ini:

Langkah-langkah :

1. Login ke dashboard blogger kalian
2. Pilih Layout dan Add a gadget dimana kalian ingin meletakannya
3. Muncul pop-up windows, pilih HTML/JavaScript
4. Masukan script dibawah ini : 
<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>
5. Save dan selesai sudah Cara Membuat Widget Sosial Media Share Melayang Di Sebelah Kiri Blog.

Sekian dari postingan saya, selamat mencoba :) Baca juga : Cara Menampilkan Iklan Adsense Di Awal & Di Tengah Postingan Blog.