Pop Up Facebook With Lightbox Effect - Selamat Sore Sobat DS . kini seperti tema yang sama pula namun dengan penempatan widget yang berbeda karena pada fanspage facebook like box ini menggunakan style pop up yang khalayak seperti pada umumnya pop up facebook like box dan dengan efek lightbox atau warna gelap disekeliling widget. Cara memasang pop up facebook like box inipun masih sama seperti pada tutorial sebelumnya, yakni hanya dengan menambahkan kode yang ada didalam blockquote kedalam widget HTML/Javascript yang terdapat pada elemen tata letak blog. Untuk lebih jelasnya berikut tutorial cara memasang Pop Up Facebook With Lightbox Effect kedalam blog.

1. Login seperti biasa ke akun blogger.
2. Copy kode berikut ini kemudian paste kedalam widget HTML/Javascript.

<style type="text/css">
* html #popupfacebook {position:absolute;} #popupfacebook {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0PtBIQemSyflQoCZKS-5D9V3txtk1o84WugCpJ1Cau1erIL7GY2u76BIkkeGiEev4jp9cpkqwsGfU3aCMWBbtRDjd2OOvQyRwrtce7VdNmv4U56mw5KjF008qI-JUp_I6DY5byjMLg/s128/popupideasopacity0.5.png');margin:0; overflow-y:auto;z-index:999999;} #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; padding: 20px;z-index:999999;} #popup-title {background:#52e052;color:#000;font-size:20px !important;font-weight:bold;width:324px;margin: 0 -27px 10px -27px;padding:10px;line-height:25px;text-align: center;font-family:Arial !important; float:left;} .likefaceblogevolutions { width: 280px; height: 200px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 10px 15px 0; margin-top:60px; } .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%2Fandestyle&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://mas-andes.blogspot.com/2013/08/pop-up-facebook-like-box-with-lightbox.html">Get this widget</a></center>
</div>
</div>

Keterangan:
Ganti andestyle dengan ID facebook atau fanspage anda.

3. Langkah terakhir klik Simpan.

Selesai sudah untuk menerapkan Pop Up Facebook With Lightbox Effect kedalam blog dan apabila nanti pengunjung datang kedalam blog anda maka widget pop up facebook like box ini siap menyapa setiap pengunjung yang datang dan bisa klik tombol close untuk keluar maupun klik Like apabila suka untuk mengikuti update terbaru dari fanspage tersebut.