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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrvcqTFXN6EJ3pskAM3rmkebrZnvpLVYrCK2ip97W4CFKZHKe6FylSMKbScQ8BId9BTiCzFIxZQCd_WQsrLNI7dHJwbmMm_ANphEinuvmwG3vHgYJSr3pIdhRQWy-lHekoYJrJ6RRh51O/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/AVvXsEjzyIgW7OKWaMe6mW3AghFisKDghOk-VuAN9OD32cImQU1TyZGESDUaY7h3r53VHLC0p1CuQn4_jTNMeJMasYVYraKBxyC03I-IMFK1kovdiy8PCisGJDCuLU70_TU2Hpbx2DK_wMdMvAjE/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...
 

48 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. cara mengganti tulisan seperti home, news, tutorial ato yg lain. sama cara ngrubah isinya. makasih

    BalasHapus
  12. coba dulu gan, mudah"an berhasil

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

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

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

    BalasHapus
  16. Siiiip...bisa jadi referensi.....

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

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

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

    BalasHapus
  20. Langsung aq coba gan..
    trims.

    BalasHapus
  21. trims.. sekali terapkan langsung sukses..

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

    BalasHapus
  23. tengkiyu gan ...
    infonya manfaat bgt...

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

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

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

    BalasHapus
  27. sangat bermanfaat gan,,

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

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

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

    BalasHapus