Cara Membuat Jquery Pop Up Fans Page Facebook

Rahina Blog, Fans Page Facebook adalah sebuah halaman khusus yang dibuat untuk menyabarkan informasi pada fans yang menyukai fans page. fans page ini
dipasang di sebuah blog agar lebih banyak mendapatkan like dari pengunjung. Fans Page ini dipasang dengan banyak cara entah itu tombol like, Kotak Fans Page, Widget slide, Pop Up, dan lain sebagainya.

Fans Page dengan pop up adalah sebuah fans page yang muncul jika anda mengunjungi sebuah website atau blog entah dengan waktu (timer) atau hanya memakai tombol penutup (close). Widget Fans Page dengan jquery ini memiliki beberapa fitur unik seperti waktu (timer) yang bisa anda atur, Tombol batalkan (cancel), Jquery pop up yang membantu anda mendapatkan banyak fans atau like, dan mudah untuk dipasang, anda juga bisa mengatur judul widget.

Cara Membuat Jquery Pop Up Fans Page Facebook

1. Silahkan Masuk Ke Akun Blogger Anda.
2. Setelah itu, Klik Menu Template, >> Klik Tombol Edit HTML.
3. Cari kode berikut </head> dengan menekan CTRL+F.
4. Masukan Plugins Jquery Berikut diatas kode </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>

Lewati Langkah ini jika anda sudah pernah memasukan plugin jquery ini.

5. Cari kode berikut <style type='text/css> Dengan Menekan CTRL+F
6. Masukan Css Berikut ini Di bawah <style type='text/css>

/* Like box By Rahina Blog */
makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:320px;
height:360px;
overflow:hidden;
}
makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsBF39dr0u8u8jza_VFKc64zS0iwbLsofKBzE6N2SXX8cuXKffBkl-aWv0Kn0QboUlr1a4FDI7ttVDixzGf8df9xeNqMuox8N5uyXAJ3yKIhWnj0CXjoHSo-y0whqQlR4OzqMrhp22C0/s1600/kunci+h1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;overflow:hidden !important;
}
mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
grabthis a{
color: #000;
text-decoration:none;
}
grabthis a:hover{
text-decoration:underline;
}

7. Cari kode berikut </body> Dengan Menekan CTRL+F
8. Masukan Jquery brikut ini di atas kode </body>

<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>

9. Simpan Template nya sob !!!
10. Klik Menu Tata Letak, >> Klik Add Gadget, >> Tambahkan Widget HTML.
11. Masukan kode berikut ini :

<!-- Start Jquery Pop Up Fans Page Facebook -->
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Rahina.Blog&amp;width=320&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:300px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://sangseoid.blogspot.com" target="_blank">Rahina Blog</a> | <a href="http://sangseoid.blogspot.com/2015/06/cara-membuat-jquery-pop-up-fans-page.html" target="_blank">Get Widget !</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End Jquery Pop Up Fans Page Facebook -->

Keterangan :

Di langkah terkahir ini perlu anda edit trutama di bagian <iframe......../Rahina.Blog......>
Ganti user/kata Rahina.Blog dengan User/id FansPage facebook Anda Selebih nya tinggal anda sesuai kan saja dengan ke inginan masing" beda insan beda slera soal ya hehe
Dan Klik Tombol Simpan.

Demikian lah Artikel tentang Cara Membuat Jquery Pop Up Fans Page Facebook Semoga bermafaat.