Widget Popup Fanspage Facebook Like Box Dengan Dampak Lightbox Valid Html 5 - Fezarzone

Cara Membuat Dan Memasang Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5 - Seperti pada umumnya PopUp facebook like box dengan efek lightbox atau warna gelap yang mengelilingi widget poup ini. Cara memasang PopUp facebook like box ini pun sangat mudah, Anda hanya dengan menambahkan arahan yang ada di bawah ini ke dalam Widget HTML/Javascript yang terdapat pada hidangan Layout atau Tata Letak di dashboard blog. Untuk lebih jelasnya berikut Tutorial Cara Memasang Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 di Blog.

Sebelum memasang widget ini perlu Anda ketahui kalau Widget PopUp ini murni menggunakan CSS, HTML dan tidak menggunakan Javascript atau Jquery alias Valid HTML 5. Makara sehabis anda memasang widget  ini kecepatan blog Anda tidak akan menjadi berat atau akan tetap ibarat sebelum memasang popup ini.

Baca Juga: Cara Membuat Loading Blog Menjadi Sangat Cepat Dengan Jquery Lazy Load

LANGKAH-LANGKAH:

1. Silahkan Login ke akun Blogger Anda.

2. Pada Dashboard >> Pilih Layout/Tata Letak.

3. Klik Tambahkan Gadget (Terserah Mau Ditaruh Dimana Saja).

4. Kemudian Copy Kode CSS dibawah ini lalu Klik dan Paste didalam kotak HTML/Javascript.

<style type='text/css'>
#PopUpBL {
position : absolute;
display : block;
top : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.8);
margin : 0;
overflow : hidden;
z-index : 999999;

}
#PopBookBL {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBookBL {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #4791d2 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitleBL {
background : #4791d2;
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 : #4791d2;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.anarchyta, .anarchyta:before, .anarchyta:after {
background : transparent;
border : #4791d2 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 #4791d2;
}
.close {
background : #4791d2;
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>

5. Kemudian tambahkan Kode dibawah ini Tepat Dibawah Kode CSS diatas.

<div id='PopUpBL'>
<div class='PopBookBL' id='PopBookBL'>
<h3 id='PopTitleBL'>LIKE US ON FACEBOOK</h3>
<div class='anarchyta'>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/bacalagiid' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById(&#39;PopUpBL&#39;).style.display=&#39;none&#39;'>CLOSE</a>
</div>
</div>

Catatan : Silahkan anda ganti URL yang saya tandai dengan URL Fanspage Anda dan Silahkan juga anda atur CSS dan HTML nya sesuai impian Anda.

6. Langkah terakhir klik "Simpan".

Sampai disini Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 Anda sudah terpasang ke dalam Blog Anda dan tidak akan menciptakan loading blog menjadi berat serta secara tidak eksklusif widget sanggup meningkatkan trafik blog alasannya ialah dengan blog yang loading nya cepat itu disukai oleh google dan visitor.

Baca Juga : Cara Ampuh Meningkatkan Trafik Blog Dengan Cepat

Sekian Tutorial Cara Memasang Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 Di Blog dan Semoga Fanspage anda semakin banyak yang ngeLike. Terima Kasih dan Semoga Bermanfaat.. :)