Pop Up Facebook Like Box With Lightbox Effect

  Pop Up Facebook Like Box With Lightbox Effect -  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:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dZapY4p95K_JYC4LqW_VD2IJL0nCA_vuvcwMxG5sJXlIrx_HgK-_ykXwgpzYwp__ziSBaL21vWAqbDaST-1ZDyaRecBs7nsaE-QelOo7aKHZeZXVb_7YmiaonW5PhcXUD3FGpyQZZw/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%2Fgalang-capricorn&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 galang-capricorn 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.