Pop Up Facebook Like Box With Lightbox Effect

Pop Up Facebook Like Box With Lightbox Effect - Untuk melengkapi postingan sebelumnya yang sudah ada mengenai facebook like box untuk merubah tampilan fanspage facebook yang terdapat didalam blog yang diterangkan pada artikel yang berjudul cara modifikasi facebook like box pada blog, maka 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 Like Box 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:0;left:0;width:100%;height:100%;position:fixed;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivKq47maRzPs8j2Dbs6ZuDuSqYobVw3ZuZlui4snkHlLiwNL2VHkzI8w2DjpZ96JQgOoFKVBHfvD0h28aUo3S-RTKUn51GXSf4jjBpivvA4jW7OD0FXKlK7llBv4D_oat9Zu6q6vviEw/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%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 Like Box 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.