Pop Up Facebook Like Box With Lightbox Effect

Pop Up Facebook Like Box With Lightbox Effect - Seperti pada umumnya pop up facebook like box dengan efek lightbox atau warna gelap disekeliling widget. Cara memasang pop up facebook like box inipun cukup mudah, sobat hanya dengan menambahkan kode yang ada di bawah ini ke dalam 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.

Sebelum memasang widget ini perlu sobat ketahui jika kode di bawah ini murni CSS tidak memakai Javascript jadi setelah memasang widget ini kecepatan blog sobat tidak akan berat atau tetap seperti sebelum memasang widget ini.

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

<style type='text/css'>
#PopFace { position:absolute; display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-color:rgba(0, 0, 0,.8); margin:0; overflow-y:auto;z-index:999999;} 
#PopBook { background-color: #ecf0f1; overflow:none; z-index:999999;} 
.PopBook { width:290px; height:300px; position:fixed; top:45%; left:50%; margin-top:-200px; margin-left:-200px; border: 10px solid #3b5998; padding: 20px;z-index:999999;border-radius:4px;} 
#PopTitle {background:#3b5998;color:#fff;font-size:20px !important trebucet ms;font-weight:bold;width:324px;margin: 0 -27px 10px -27px;padding:10px;line-height:25px;text-align: center; float:left;} 
.anarchyta { width: 280px; height: 200px; border-radius: 3px; position: relative; background: #3b5998; padding: 0px 10px 15px 0; margin-top:60px; } 
.anarchyta,.anarchyta:before,.anarchyta:after { background: transparent; border: 1px solid #3b5998; } 
.anarchyta:before,.anarchyta:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } 
.anarchyta:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #3b5998; } 
.close {background: #3b5998; padding:5px 5px 10px 5px; font-size:12px; color:#ecf0f1; text-decoration:none;border-radius:4px 4px 0 0;} 
</style>
 
<div id='PopFace'>
 <div class='PopBook' id='PopBook'>
  <h3 id='PopTitle'>Get Update Articel Via Facebook</h3>
 <div class='anarchyta' style='border-radius:4px;'>
  <div style='height:200px;overflow:hidden;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farieadie&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false' style='border:none; overflow:hidden; width:292px; height:258px;'></iframe>
  </div>
</div>
<br />
<span style='float:left;font-size:14px;cursor:pointer;'><a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CLOSE</a></span>
<span style='float:right;'><a href='http://mas-arie69.blogspot.com' style='font-size:xx-small; color:#3b5998; text-decoration:none;' target='_blank'>Get this widget</a></span>
 </div>
</div>

Keterangan:
Ganti arieadie dengan ID facebook fanspage sobat.

3. Langkah terakhir klik "Simpan".

Kini Pop Up Facebook Like Box With Lightbox Effect sobat sudah terpasang ke dalam blog dan apabila nanti pengunjung datang blog sobat maka widget Pop Up Facebook Like Box With Lightbox Effect ini otomatis tampil setiap pengunjung yang datang dan bisa klik "Close" untuk keluar maupun klik "Like" apabila pengunjung ingin mengikuti update terbaru dari fanspage tersebut.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit