Cara Membuat Popup FansPage Facebook Di Blogspot

Hello Sobat Disini Saya Akan Kasih Tutorial Cara Membuat Popup FansPage Facebook Di Blogspot .Apa sih itu popup Fanspage Fb ?? ... Popup Fanspage itu jika pengunjung mampir ke blog kalian otomatis akan di sajikan dulu oleh popup FansPage Sebelum Melihat isi Blog Kalian . Jika Kalian Ingin Lihat-lihat dulu silahkan Klik demo di bawah ini .

Demo

Nah Bagaimana?? Anda Tertarik memakai popup fanspage Fb di blog kalian?
Kalo Anda Ingin Pasang Popup Fanspage fb di blog Silahkan ikuti Cara pemasangannya di bawah Mudah Ko ......

Cara Pemasangan:

1.Login Ke blog kalian
2.Menuju Tata Letak / "ADD GADGET"/"HTML"

Lalu Masukkan Kode Di bawah Ini 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("follow").ready(function(){
        $(".follow").fadeIn(1000);
    });
        $(".close").click(function(){
        $(".follow").fadeOut(1000);
    });
});
</script>
<style>
.follow {
    display: none; 
    position: fixed; 
    z-index: 99999999; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.follow-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 340px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.follow-header {
    padding: 2px 16px;
    background-color: #009000;
    color: white;
}

.follow-body {width:340px;padding: 0px 0px;overflow:hidden}

.follow-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.fb-pop{width:100%;}
@media only screen and (max-width: 400px) {
.fb-page{data-width:auto;}
.follow-content{width:220px;}
.follow-body {width:220px}
}
</style>



<div id="myfollow" class="follow">
  <div class="follow-content">
    <div class="follow-header">
      <h2>Follow Me<span class="close">&times;</span></h2>
    </div>
    <div class="follow-body">
      <div style="width:100%" class="fb-page" data-href="https://www.facebook.com/Tutorial-Blogger-122735078446170/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Tutorial-Blogger-122735078446170/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Tutorial-Blogger-122735078446170/">Tutorial Blogger</a></blockquote></div>
      <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    </div>
    <div class="follow-footer">
      <h3>Lainnya : <a href="#"><i class="fa fa-google"></i></a> <a href="#"><i class="fa fa-twitter"></i></a></h3>
    </div>
  </div>
</div>

Pengaturan:
- Jika Template Kalian Sudah Mempunyai Kode Yang Berwarna Kuning Hapus Saja Kode diatas ini
- Ganti Kode yang berwarna biru dengan Link Halaman Facebook Kalian
Lalu Save/Simpan Dan Lihat Hasilnya ..

Nah itu dia Cara Membuat Popup Fanspage Facebook Di Blogspot
Mudah Bukan :D Jika Terjadi Error Silahkan Tanyakan Di Colom Komentar ."Selamat Mencoba".