Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Jquery Pop Up Fans Page Facebook

by Irsyad Aslam , at 5/26/2013 , has 7 komentar
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(http://1.bp.blogspot.com/-j0Ll9KUmPHE/UbgL4YyQplI/AAAAAAAAD4E/NQgmkpTpIWg/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
Irsyad Aslam
About
Cara Membuat Jquery Pop Up Fans Page Facebook - written by Irsyad Aslam , published at 5/26/2013, categorized as Widget . And has 7 komentar
7 komentar Add a comment
kasih live view'nya dong gan...
Bisa Dilihat Demonya http://demoblogybb.blogspot.com/ :D
Delete
Reply Delete
mantap gan, berhasil ane pasang di blog ane :)
Reply Delete
Terima kasih mas... semoga tetap terus axis...
Reply Delete
waktunya kok tetap 10 detik aja, pdhal udh dirubah
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger