Membuat Widget Facebook Like Box Dengan Tombol Melayang

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.
Biar gak penasaran silahkan melihat live demo nya di sini.
 
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
<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/mainbom&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...
 

49 Responses to "Membuat Widget Facebook Like Box Dengan Tombol Melayang"

  1. ga mau tanya, kok link di sini bisa "www.mainbom.com" padahal kan pake blogger. cara ganti kayak gitu gimana caranya?, namun saya beri tahu dulu bila mengganti apa akan mempengaruhi rank di google?

    Terima kasih.:p:

    BalasHapus
  2. cara bikin langganan artikel seperti di blog ini gmn kk caranya, kalo bisa buatin tutor nya.

    >>>SUBSCRIBE<<<

    BalasHapus
    Balasan
    1. cek dimari gan http://www.mainbom.com/2012/06/cara-membuat-langganan-artikel-via.html

      Hapus
  3. Sangat membantu bagi blogger pemula seperti saya,mampir juga gan ke blog ane y.
    http://www.intips.cu.cc

    BalasHapus
  4. keren mas, templatenya juga keren, kasih jempol dah

    BalasHapus
  5. Terima kasih gan,, saya udah nyoba,, n berhasil
    :n:

    BalasHapus
  6. thanks sob sharenya ...
    :t: http://mat3riku.blogspot.com/

    BalasHapus
  7. mantap gan!!!
    kunjungi juga game-software.info

    BalasHapus
  8. makash kawan, sangat membantu :v:
    jgn lpa berkunjung di http://agrotekaceh.blogspot.com/

    BalasHapus
  9. nice infonya..
    follow back blog ane ya gan

    BalasHapus
  10. Luar biasa ilmunya,
    praktisss..sangat praktis!
    Thanks gan.
    http://leicaku.blogspot.com/

    BalasHapus
  11. thanks...bermanfaat bgt bro !!!!!!!!!!

    BalasHapus
  12. cara mengganti tulisan seperti home, news, tutorial ato yg lain. sama cara ngrubah isinya. makasih

    BalasHapus
  13. coba dulu gan, mudah"an berhasil

    BalasHapus
  14. pas d ganti left menjadi right kok jdi gk jlan bro?
    mohon pencerahan terimakasih

    BalasHapus
  15. kalo url fb nya di ganti ama account biasa gimana ?? saya gak punya fans , jadi saya gak bikin Fansn Page

    BalasHapus
  16. Makasi bgt gan..
    mampir ke blog ane http://bengkelandri.blogspot.com/

    BalasHapus
  17. Siiiip...bisa jadi referensi.....

    BalasHapus
  18. Wah, mantaps sekali. Jalan lancar di blogku. Trims banyak ya.. Membantu sekali.

    BalasHapus
  19. thnks gan sudah berbagi ilmu dengan kita-kita,,,salam kenal aja

    BalasHapus
  20. tutorial yang baguss gannn..... di coba ya

    BalasHapus
  21. sudah diterapkan di ZOna Bebas dan NLSI. Makasih kawan :D

    BalasHapus
  22. Langsung aq coba gan..
    trims.

    BalasHapus
  23. trims.. sekali terapkan langsung sukses..

    BalasHapus
  24. di coba ah...langsung ke TKP
    di tunggu kunjungan baliknyake:
    http://bloggerasmuri.blogspot.com/

    BalasHapus
  25. tengkiyu gan ...
    infonya manfaat bgt...

    BalasHapus
  26. Keren gan Thank you... mampir juga ya di www.diamondbekasi.blogspot.com :)

    BalasHapus
  27. kenapa halaman facebooku tdk bisa tampil diblog, jika aku logout dari facebook

    BalasHapus
  28. sip keren. terimakasih banyak bos tutorialnya. setelah saya tertapkan akhirnya berhasil. ternyata tidak sesuliat yang saya bayangkan.

    BalasHapus
  29. sangat bermanfaat gan,,

    mampir juga di http://planetsphp.blogspot.com

    BalasHapus
  30. sudh nyoba juga,, jos, trims

    BalasHapus
  31. Makasih ya, berhasil di pasang blog saya http://www.bmatindas.com/

    BalasHapus
  32. terimaksaih bung, sy uda mencobanya dan sukses
    tanks yaa

    BalasHapus