News Update :

Cara Membuat Widged Facebook Like Book Melayang

Diposkan oleh : Posted on Jumat, 02 November 2012 - 9:34 AM with No comments

Kali ini Saya 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.
  

Membuat Widget Facebook Like Box Dengan Tombol Melayang


Membuat Widget Facebook Like Box Dengan Tombol Melayang

Untuk membuat Widget Facebook Like Box Dengan Tombol Melayang, ikuti langkah-langkah berikut ini.
1. Login ke Blogger -> Tata letak -> Tambah Gadget
2. Kemudian pilih HTML/JavaScript
3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript


class="tr_bq" style="border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(224, 224, 224); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: auto; line-height: 20px; margin: 20px; overflow: auto; padding: 10px; width: 537px;"> <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=https://www.facebook.com/pages/Dua-Bersaudara/447016278669572&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://lh4.googleusercontent.com/-SaNmtzk9nSY/T8XGcDEquhI/AAAAAAAAA5k/GRU1g6Pc7U0/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://lh3.googleusercontent.com/-eQXK9XNu0Mg/T8XKhaAAfOI/AAAAAAAAA6A/vU8o4JqqA78/s128/Drink-Facebook.png"  /></a>
</div>
4. Dan terakhir klik Simpan, lihat hasilnya.

Catatan:

  • Ganti http://www.facebook.com/mainbom dengan URL Fans Page Facebook Anda.
  • Jika ingin memasang tombol icon facebook di sebelah kanan, ganti left:0px; dengan right:0px; 
Semoga bermanfaat...
Share this Article on :
Cara Membuat Widged Facebook Like Book Melayang
Item Reviewed: Cara Membuat Widged Facebook Like Book Melayang 9 out of 10 based on 10 ratings. 9 user reviews.

0 komentar:

Poskan Komentar

 

© Copyright 2-Bersaudara 2015 | Design by Herdiansyah Hamzah | Editing by 2-Bersaudara.