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.
Interupsi =D 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 : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.9);
margin : 0;
overflow : hidden;
z-index : 999999;
}
#PopBook {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBook {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #3b5998 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitle {
background : #3b5998;
color : #fff;
font-size : 18px !important ;
font-weight : 700;
width : 324px;
margin : 0 -27px 10px -27px;
padding : 10px;
line-height : 25px;
text-align : center;
float : left;
}
.anarchyta {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.anarchyta, .anarchyta:before, .anarchyta:after {
background : transparent;
border : #3b5998 solid 1px;
}
.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 : 14px;
font-weight:bold;
color : #ecf0f1;
text-decoration : none;
border-radius : 4px 4px 0 0;
cursor:pointer;
}
</style>
<div id='PopFace'>
<div class='PopBook' id='PopBook'>
<h3 id='PopTitle'>Get Update Photos Via Facebook</h3>
<div class='anarchyta'>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/SoundBrigade' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a>
</div>
</div>
Keterangan : Ganti http://www.facebook.com/SoundBrigade dengan URL 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.
Sumber :http://the-anarchyta.blogspot.com/2014/01/pop-up-facebook-like-box-with-lightbox.html
.png)