cara membuat widget melayang disebelah kiri

Cara membuat widget melayang sebelah kiri isinya facebook dan google+ yaa menurut saya sih buat bagusin tampilan blog kita aja jadi di widg...

Cara membuat widget melayang sebelah kiri isinya facebook dan google+ yaa menurut saya sih buat bagusin tampilan blog kita aja jadi di widget sana berupa like dari facebook dan google+ jadi misalnya widgetnya like nya banyak kan berkesan blog kita bener banyak pengunjung dan disukai orang-orang.

Agan bisa menlihat nya tampilanya di wavker.com lihat di kiri agan ada widget melayang nah contoh gambar nya :

Sebener nya ini kode script nya ane dapat dari seocips.com, tapi berhubung awal nya ada tombol submit nya maka di pagespeed insight skor nya menjadi berkurang alias berat tentu kita gak mau dong skor nya berkurang, nah maka saya hapus beberapa kode nya menjadi tampilan facebook dan G+ aja nah dengan begitu skor kita akan tetap seperti semula.

Maka kode nya menjadi sebagai berikut :

<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'></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Nah cara memasang nya bagaimana ? yaa sekarang agan masuk dashboard bloger agan lalu > layout > add gadget (terserah agan pilih yang mana) > lalu pilih html/javscript lalu tempel kode diatas.

Setelah itu save maka lihat blog agan. biasanya work 100%.
Oke berikut tutorial dari saya mohon maaf jika ada kesalahan dan salah kata, saya ucapkan terima kasih yang sudah membaca.

Postingan Terkait

3 komentar