Facebook
Cara Pasang Pop Up Facebook Melayang - Pop Up facebook adalah salah satu cara untuk mendapatkan respon positif dari pengunjung blog dengan menampilkan facebook Pop Up dan mendapatkan klik Like facebook pada Fanspage yang sobat buat.

Kali ini Waroenk Blog mencoba membahas cara pasangnya. oleh sebab itu silahkan sobat perhatikan cara pasang pop up facebook berikut ini.

Langkah pertama memasang Jquery

  • Silahkan masuk ke dasbor blog anda.
  • Klik panah kebawah seperti pada gambar yang diberi kotak merah :

  • Kemudian Pilih >> Template
  • Dilanjutkan dengan klik >> Edit HTML
  • Setelah masuk ke jendela Edit Html kemudian silahkan cari kode </head> dengan cara klik  Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut. 
  • Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
  • Silahkan Simpan setelan sobat. 
NB :  Cek pada HTML blog sobat, jika sudah terpasang kode Script jquery seperti kode diatas maka tidak perlu dipasang lagi, abaikan langkah diatas dan masuk ke langkah berikutnya.
Langkah Ke 2 memasang Pop Up Facebooknya.
  • Silahkan kembali ke dasbor blog terlebih dahulu.
  • Klik panah kebawah seperti pada gambar yang diberi kotak merah :

  • Pilih >> Layout
  • Kemudian akan muncul halaman seperti gambar berikut ini :


  • Pilih Add Gadget



  • Maka anda akan ditampilkan berbagai macam widget bawaan blogger serta Widget HTML/Javascript Untuk memasang Kode HTML Widget.
 
 
  • Kemudian silahkan pasang kode berikut ini pada kolom kode sedangkan kolom judul/title abaikan atau kosongkan saja :
<!-- 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/AVvXsEh8wP010o5lEgQraN0CbZ4ID2qoNJCebxrmMwiocD9sawCj-N4qktdiC6RVbhpVJ-4Kzs89hAkx3YvTf_ZTK1FIFiItky7HB8mvTUdflZ-z74WdYkQZ_W4Uefd3Ie5G50au2FOZZo5SbE4/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=https://www.facebook.com/pages/Waroenk-Blogger-Jasa-Pembuatan-Blog/502652399842110&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 rel="nofollow" href="http://waroenkblog.blogspot.com" target="_blank">Waroenk Blog</a> | <a  rel="nofollow" href="http://waroenkblog.blogspot.com/2013/11/cara-pasang-pop-up-facebook-melayang.html" target="_blank">Get Widget !</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Close</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 hijau adalah judul dari pop up.
  3. Ganti kode yang berwarna biru dengan url fans page anda.
  •  Terkahir simpan pengaturan sobat
  • Cek ke homepage atau halaman blog sobat apakah sudah terpasang dengan benar atau belum.
Sudah selesai Waroenk Blog terangkan Cara Pasang Pop Up Facebook Melayang. jika masih ada kesulitan dalam pemasangan silahkan komentar pada kolom yang tersedia. Terimakasih