Cara Membuat Like Box Facebook Melayang (Popup) Dengan Lightbox Effect

Like box Facebook melayang di blog-

Semua blogger tentunya menginginkan blognya dibanjiri banyak pengunjung. Pada postingan sebelumnya saya share tentang cara promosi blog dan meningkatkan trafik blog, salah satunya dengan situs sosial media seperti facebook. Kali ini saya akan mengulas tentang bagaimana cara membuat like box facebook melayang atau yang bisa kita sebut pop-up dengan efek lightbox atau warna gelap disekeliling widget.,

Menurut pendapat saya widget ini lebih ampuh untuk menggalang fans di fanpage dari pada like box yang disediakan oleh facebook, karena wdiget ini bersifat welcome page dan pengunjung akan melihatnya pertama kali setiap membuka blog anda, nanti pengunjung datang kedalam blog anda maka widget pop up facebook like box ini siap menyapa setiap pengunjung dan bisa klik tombol close untuk keluar maupun klik Like apabila suka untuk mengikuti update terbaru dari fanspage tersebut.

Apa anda tertarik untuk memasangnya di blog anda? Jika anda suka silahkan ikuti langkah-langkah cara memasang Pop Up Facebook Like Box With Lightbox Effect berikut ini:

1. Login seperti biasa ke akun blogger.

2. Copy kode berikut dibawah ini:

<style type="text/css">
* html #popupfacebook{position:absolute}
#popupfacebook{display:block;top:0;left:0;width:100%;height:100%;position:fixed;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp2nRLQ_zJu7Et6AP9JtkzCHAB_0uTNcnK1r2Ltx7PQyf-e-sZNA7J2vS6J8eBWx9ObQK0PCFjWDMPU47VZq_wVQSiGQTVAEWNgYQizLZz8dAVb7_O0m7v9fxYU8mIJZzduYJp1FOf3g/s128/popupideasopacity0.5.png);overflow-y:auto;z-index:999999;margin:0}
#facebookpopup{background-color:#000;overflow:none;z-index:999999}
.facebookpopup{width:290px;height:300px;position:fixed;top:45%;left:50%;margin-top:-200px;margin-left:-200px;border:10px solid #52e052;z-index:999999;padding:20px}
#popup-title{background:#52e052;color:#000;font-size:20px!important;font-weight:700;width:324px;line-height:25px;text-align:center;font-family:Arial!important;float:left;margin:0 -27px 10px;padding:10px}
.likefaceblogevolutions{width:280px;height:200px;border-radius:3px;position:relative;background:#E9FBE9;margin-top:60px;padding:0 10px 15px 0}
.likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after{background:#E9FBE9;border:1px solid #52E052}
.likefaceblogevolutions:before,.likefaceblogevolutions:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}
.likefaceblogevolutions:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #52E052}
</style>

<div id="popupfacebook">
<div id="facebookpopup" class="facebookpopup">
<h3 id="popup-title">Get Update Article Via Facebook</h3>
<div class="likefaceblogevolutions">
<div style="height:200px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBisnisSampingan4U&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
<br />
<center style=" float:left; font-size:14px;cursor:pointer;" ><a style="background: #52E052; padding:5px 5px 10px 5px; font-size:12px; color:#000; text-decoration:none;" onmouseup="document.getElementById('popupfacebook').style.display='none'">[X] CLOSE</a></center>
<center style="float:right;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://obatalami69.blogspot.com/2016/05/cara-membuat-like-box-facebook-melayang.html">Get this widget</a></center>
</div>
</div>

Keterangan:
- Judul/ title dari popup box "Get Update Article Via Facebook" sesuaikan dengan selera anda
- Ganti BisnisSampingan4U dengan ID facebook atau fanspage anda.

3. Langkah selanjutnya tinggal memasang kedalam widget blog, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Itulah langkah-langkah cara membuat pop-up-facebook-like-box-with-lightbox di blog, semoga bermanfaat. Mau lihat demonya klik di sini. Selamat mencoba !