Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5

Cara Membuat Dan Memasang Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5 - Seperti pada umumnya PopUp facebook l...

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.

Cara Memasang Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5

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.

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 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(&#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 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.. :)

COMMENTS

Destinasi Wisata di Singapura
Nama

AdSense,2,AdWords,1,Android,5,aplikasi kasir online omegasoft,2,bersama untan membangun negeri,1,Bisnis,1,Bisnis Online,1,Blogger,20,Blogging,20,Blogging Competition,1,Bussiness,1,CSS,1,Depok News,3,Gadget,5,Hiburan,2,HTML,1,Investement,1,iphone,1,Komunitas,2,Kontes SEO,1,Lifestyle,5,Pikko Group,1,RSMRM,1,SEO,7,Signature Park Grande,1,Smart City Indonesia,1,Software,2,Software Kasir,1,Software POS,1,Tech News,16,teknologi,16,Tips and Trik,11,Traveling,2,Unik,1,Widget,6,Windows,4,
ltr
item
Bacalagers Design: Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5
Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5
https://4.bp.blogspot.com/-EalEiBgX3Ow/WFra7SQdwBI/AAAAAAAACYQ/oAGmpdWJGyIw5k9pT85rZmsfNk-Y4caCwCLcB/s400/PopUp%2BFanspage%2BLike%2BBox%2BDengan%2BEfek%2BLightbox%2BValid%2BHTML%2B5.png
https://4.bp.blogspot.com/-EalEiBgX3Ow/WFra7SQdwBI/AAAAAAAACYQ/oAGmpdWJGyIw5k9pT85rZmsfNk-Y4caCwCLcB/s72-c/PopUp%2BFanspage%2BLike%2BBox%2BDengan%2BEfek%2BLightbox%2BValid%2BHTML%2B5.png
Bacalagers Design
https://designmbc.blogspot.com/2016/12/widget-popup-fanspage-facebook-like-box.html
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/2016/12/widget-popup-fanspage-facebook-like-box.html
true
6049018267264755231
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy