Cara Membuat Pop Up facebook like box Dengan Lightbox Effect

Cara Membuat Pop Up facebook like box Dengan Lightbox Effect

Cara Membuat Pop Up facebook like box Dengan Lightbox Effect - Siapa sih yang belum mengenal salah satu media sosial ternama yang satu ini, pasti semua sudah mengenalnya bukan?, mulai dari anak di bawah umur, Remaja bahkan orang tua sekalipun sudah menggunakan media sosial facebook yang tenar di dunia dan di dunia maya ini.

Sangat besar fungsinya facebook untuk kita para pemeran yang bermain di dunia maya ini dan Disinilah para blogger berkesempatan untuk mempromosikan blognya dengan menggunakan widget dari facebook, seperti promosi halaman blog kita di facebook misalnya dan begitu juga sebaliknya melakukan promosi halaman facebook di blog.

Kali ini saya akan memberikan salah satu kegunaanya menggunakan widget facebook like, Facebook like ini merupakan widget yang di sediakan pada pengunjung blog untuk melakukan klik suka pada halaman blog kita di facebook. Facebook like box di blog yang akan saya bagikan ini menggunakan gaya Pop up pada blog kita sehingga lebih mudah pengunjung untuk mengetahui adanya widget like box tersebut, nah jika anda tertarik di bawah berikut screen shoot dan tutorialnya sudah saya sediakan kepada anda.

Pop up Like box Facebook di blogger

Cara Membuat Pop Up facebook like box Dengan Lightbox Effect

1. Login ke akun blogger anda dan masuk ke Tata letak lalu pilih Add widget HTML/JavaScript.
2. Masukkan Code dibawah ini :
<style type='text/css'>
#PopFacebox {
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;
}
#PopBooks {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBooks {
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='PopFacebox'>
<div class='PopBooks' id='PopBooks'>
<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/KabarLangitCom' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CLOSE</a>
</div>
</div>
3. Lalu simpan dan lihat hasilnya pada blog anda.

Demikianlah artikel yang bisa saya berikan tentang Cara Membuat Pop Up facebook like box Dengan Lightbox Effect , jika anda tertarik untuk mendesain halaman komentar anda, anda bisa mengujungi artikel saya berikut Cara membuat threaded comment blog Seperti Kang Ismet .

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »