Membuat Widget Like Box Melayang Di Blog

Hallo shobat blogger kali ini saya akan membahas tentang tutorial Membuat Widget Like Box Melayang Di Blog, widget ini banyak di pakai oleh para admin blog yang menginginkan blognya terlihat lebih rapi hingga bisa memanjakan mata pembaca blognya, dan dapat mempermudah pengguna/pembaca blog untuk share postingan blog ke sosmed (Social Media). berminat untuk memasangnya di blog kamu??, jika berminat mari langsung saja ikutin tutorialnya di bawah ini oky!!

Membuat Widget Like Box Melayang Di Blog

Memasang CSS Widget Like Box Melayang Di Blog

Nah sebelum kita membahas Tutorialnya di atas. tau gak sih apa itu widget???
bagi anda yang belum tau apa itu widget, ini dia pengertiannya.
Widget adalah aplikasi yang di pasang pada web/blog untuk menampilkan widget perlu menambahkan Element-element kode html tertentu, namun ada juga widget bawaan yang biasanya berupa gambar,flas,vidio dll.
Kitapun bisa mendapatkan Widget-widget menarik lainnya, salah satunya adalah Widget Like Box Melayang Di Blog ini dan masih banyak lagi.

Result

1. Masuk terlebih dahulu ke Blogger>Tema>Edit Html, lalu cari kode ]]></b:skin>atau</style>dan pastekan kode berikut tepat sebelum kode yang tadi di cari, Untuk mempercepat pencarian silahkan klik

CTRL

pada keyboard kamu


/*Share Button By ID Dzgn*/
#IDdzgnsharebtn {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;}
#IDdzgnsharebtn .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){#IDDzgnsharebtn{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)}
}

Terakhir silahkan kamu simpan/save tema, Selanjutnya tinggal kamu mengikuti tahap terakhir di bawah ini.

Memasang Widget Like Box Melayang Di Blog

2.Dari mode Edit Html tadi silahkan pidah ke Tataletak Lalu pilih Tambahkan Widget/Gatget
3. Pilih HTML lalu tambahkan kode di bawah ini tepat pada area HTML seperti gambar di bawah ini.
Untuk Kodenya di bawah ini


<div id="IDdzgnsharebtn" title="Share This With Your Friends">
<div class="sbutton" id="gb">
<fb:like font="" layout="box_count" show_faces="false"></fb:like></div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></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>
</div>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/></script></div>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script>

Nah sekarang klik simpan/save, lalu lihat hasilnya pada blog anda.

Perlu Ketelitian, Kesabaran dalam mempelajari ilmu-ilmu yang murni bermanfaat untuk menunjang sebuah kesuksesan dalam meraih cita-cita