Cara Membuat Widget Like Box Melayang Dengan Tombol Close Muantep

Cara Membuat Widget Like Box Malayang Dengan Tombol Close Muantep - Poetra Pakumis Kali ini Admin RM akan share cara membuat widget Facebook like box dengan tombol melayang. Artinya Facebook like box akan muncul dibagian atas blog ketika pengunjung mengklik icon Facebook yang ada di sebelah kiri Blog Anda. Widget ini juga memiliki tombol close, sehingga tidak mengganggu tampilan blog Anda.

Bagaimana? tertarik? kalo tertarik ingin tau cara membuat nya nyok marii Admin RM kasih tau cara nya

1. Login ke Blogger -> Tata letak -> Tambah Gadget

2. Kemudian pilih HTML/JavaScript

3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="left">
<div style="background:#ffffff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/poetrapakumis&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>

</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyk9VUsgVpQsQwTNj0q5Royvo1KZvQSi3AGeG4pHs_O5HxYvMvFHqe7kWBttdN-rB0-XqNcVn3Q6qc1agSPfZfC9oaTJGpz_hnvTwGq__7lVTTBqt6U1rjKiYWgsUH4hiEItKukZPSaV4X/s128/Close-32.png" alt="close" title="Click here to Close Box" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:50%; left:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgumPUFHtAr86GTafN2KKm4iI-I8h-IvotlP-K0qgX2RuGqdWBNfCDzOrox1aPFiQiTMSQpK4uxmjoQoItd7aoZgMctbUUEncaIfpls1JvkSTOUG-OrQB47F2GfmZtkJv5pbU7HZP8rtHS_/s128/Drink-Facebook.png"  /></a>
</div>

Note:
Kode berwarna merah itu adalah URL fans page sobat
kode warna biru itu bisa sobat ganti jika ingin memasang tombol  icon facebook di sebelah kanan, ganti left:0px; dengan right:0px;

Nah, sekian artikel saya tentang cara membuat widget Facebook like box dengan tombol melayang. semoga bermanfaat iyah sobat.

Jika anda menyukai artikel Cara Membuat Widget Like Box Melayang Dengan Tombol Close Muantep dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.