Cara Membuat Facebook Like Box Pop-Up dengan CSS Terkeren

Facebook Like Box Pop-Up ini merupakan widget melayang yang memuat kotak like sebuah halaman fans Facebook atau Fanpage. Dengan membuat widget like box ini melayang tentu akan menarik pengunjung blog untuk mengklik like pada fanpage yang kita buat.

Nah, jika ada sobat yang bertanya apakah widget ini akan memperberat loading blog, jawabannya tentu tidak! karena widget melayang ini tidak diselipkan oleh javascript, yang tidak akan berpengaruh terhadap loading blog kita. Ditambah juga dengan tombol close untuk menghilangkan tampilan widget pop-up like box ini.

DEMO

Berikut langkah-langkahnya:

1. Pastikan sobat sudah mempunyai halaman Fanpage Facebook, jika belum silahkan buat di https://www.facebook.com/pages/create.
2. Login ke Akun Blogger sobat.
3. Masuk ke Dasbor Blog, pilih menu Tata Letak > Tambahkan Gadget.
4. Pada HTML/JavaScript, masukkan kode berikut 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/AVvXsEj1y0H6-rj5Nk0kTOUm_FHWwPbm2NmGnD2sX0qOxAidINXFAeTMzuJss199FV3UAslcxiSACQi4uHsl7R__2S9zR5tV3mgioJKHMtkPDBS8vFtu-xOj4JZ-i4EP1UI6jCHbDi6iss0RYQ/s128/popupideasopacity0.5.png);overflow-y:auto;z-index:999999;margin:0}
#facebookpopup{background-color:#FFFFFF;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 #009cff;z-index:999999;padding:20px}
#popup-title{background:#009cff;color:#FFFFFF;font-size:20px!important;font-weight:700;width:280px;line-height:25px;text-align:center;font-family:Arial!important;float:left;margin:0 auto;padding:0px}
.likefaceblogevolutions{width:280px;height:200px;border-radius:3px;position:relative;background:#FFFFFF;margin-top:60px;padding:0 10px 15px 0}
.likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after{background:#FFFFFF;border:1px solid #009cff}
.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 #009cff}
</style>
<div id="popupfacebook">
<div id="facebookpopup" class="facebookpopup">
<h3 id="popup-title">KLIK LIKE DI BAWAH!!</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%2FPuloBlog&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: #009cff; padding:5px 5px 10px 5px; font-size:12px; color:#FFFFFF; text-decoration:none;" onmouseup="document.getElementById('popupfacebook').style.display='none'">CLOSE</a></center>
</div>
</div>

Keterangan:

• Ganti PuloBlog dengan ID Facebook Fanpage sobat.

5. Klik Simpan. 

Itulah tutorial blogger tentang Pop-Up Like Box Fanpage dengan CSS untuk kesempatan kali ini, semoga cara ini dapat bermanfaat untuk sobat blogger semua.
Sekian, terima kasih.

sumber : http://puloblog.blogspot.com/2015/01/cara-membuat-facebook-like-box-pop-up-css-keren.html