Cara Membuat Dan Memasang Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5 Terbaru 2018
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
kode yang ada di bawah ini ke dalam Widget HTML/Javascript yang terdapat
pada menu 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 jika Widget PopUp ini murni menggunakan CSS, HTML dan tidak memakai Javascript atau Jquery alias Valid HTML 5.
Jadi setelah anda memasang widget ini kecepatan blog Anda tidak akan
menjadi berat atau akan tetap seperti sebelum memasang popup ini.
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 kemudian 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('PopUpBL').style.display='none''>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 keinginan 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 membuat loading blog menjadi berat serta secara tidak langsung widget dapat meningkatkan trafik blog karena 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.. :)
No comments :
Post a Comment