Cara Membuat Jquery Pop Up Fans Page Facebook

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

---

• Silahkan Masuk Ke Akun Blogger Anda.
• Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
• Cari kode berikut </head> dengan menekan CTRL+F.
• 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>

• Kemudian, Klik Tombol Simpan Template.

Catatan :

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

• Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Tambahkan Widget HTML.
• Masukan kode berikut ini :

<!-- Start Jquery Pop Up Fans Page Facebook -->

<style type='text/css'>

#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/AVvXsEhgEJ34EMh35yXwM8lXUeQN-ollA6T9TgAyt7LreI8jb6dSBPESN3NMjFBBAanQqHmGDZ17XR7tNbURWHnk9XYGtOPL5oNWFCPyqDYyW9fyZ7y2v9cJSEvVivvoMSSvh5xpPA0UBSzi7PA/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;

}

</style>

<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>

<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/pages/Your-Belajar-Blog/395122827241045&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://your-belajarblog.blogspot.com" target="_blank">Your-BelajarBLOG</a> | <a href="http://your-belajarblog.blogspot.com/2013/05/cara-membuat-jquery-pop-up-fans-page-facebook.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:

1. Kode yang berwarna merah adalah waktu (timer) dari pop up.

2. Kode yang berwarna kuning adalah judul tombol dari tombol pembatal (cancel)

3. Kode yang berwarna hijau adalah judul dari pop up.

4. Ganti kode yang berwarna orange dengan url fans page anda.

5. Kode yang berwarna abu-abu adalah lebar dan tinggi dari widget.

• Setelah itu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG