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;
}
.vanz {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.vanz, .vanz:before, .vanz:after {
background : transparent;
border : #3b5998 solid 1px;
}
.vanz:before, .vanz:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.vanz: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='vanz'>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/blogirvanefendy' 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/blogirvanefendy dengan URL facebook fanspage sobat.
Ganti http://www.facebook.com/blogirvanefendy 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.
Oke sekian dulu artikel mengenai Pop Up Facebook Like Box With Lightbox Effect semoga pengunjung sobat tambah ramai seperti pasar malam.
Resource: http://the-anarchyta.blogspot.com/2014/01/pop-up-facebook-like-box-with-lightbox.html
Tags:
#CSS
#Tutorial Blog
