Cara Membuat Widget Share

Cara Membuat Widget Share

Teknologi Komputer kini akan membuatkan kalian artikel tentang tombol share, seperti di sebelah kiri kalian yang ada semacam widget. Nah kali ini saya akan membahas cara membuat widget share melayang di sebelah kiri seperti punya teknologi komputer ini. Ada juga widget untuk twitter baca juga cara memasang widget twitter.Memang banyak yang menganggap tidak penting tapi kalau saya ya agar blog terlihat bagus aja. Ada banyak widget share tersebut, tidak hanya di samping kiri, disamping kanan, dibawah atau di atas pun sebenarnya bisa. Tapi saya taunya yang sebelah kiri jadi bahas yang di kiri aja hahaha.
Tombol share, widget share

Tanpa panjang lebar lagi, berikut ini Cara Membuat Widget Share atau Tombol Share melayang di sebelah kiri. Ikuti langkah berikut :
1. Masuk ke blogger dan kemudian menuju ke Tata Letak
2. Pilih " Add Gadge " dan pilih " Html/Javascript "
3. Kemudian copy kode 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>
4. Kemudian paste dan simpan.

Nah selesai, mudah kan cara membuat tombol share di blog. Semoga bermanfaat dan membuat blog kalian jadi semakin bagus haha.



Contact Us

Name

Email *

Message *

Enter your email address:

Delivered by FeedBurner

Back To Top