Cara Pasang Like Fanspage Melayang di Blog

Like Fanspage Melayang di Blog

Baik sobat blogger, kali ini kita akan membahas tentang Tutorial Cara Pasang Like Fanspage Melayang di Blog.

Kode ini aman dan jelas valid HTML, tapi memang setiap orang mempunyai selera yang berbeda, di blog saya Kang Fandi ini lebih jarang menggunakan sebuah widget yang bersifat flash karena memang menurut saya sedikit mengganggu, tapi itu juga tidak begitu penting untuk di pikirkan. langsung saja sobat ke tutorialnya sebagai berikut :

1). Pergi ke Dashboard Blogger > Layout > Add Gadget > Tambah Gadget HTML/Javascript.
2). Kemudian sobat tinggal copy kode HTML berikut dan salin di Gadget HTML/Javasript tadi.

<!-- 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:12px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5vdMvLVA9g2yXBWWrFECoWANlWRuNsmZCqvvW091bgWeUlj5HRY9MHswEYgu5S9aEe7Vt51MRmyWWYoBngLrkDF3CO93QjT8_92jKRjVLX02DOw75SXaOURqonxEsWA48OzC1QC4OvA/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/R-E-V-O-L-V-E-R/330460896990450&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>
<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 -->

a). Ganti tulisan yang berwarna pink dengan URL Fanspage sobat sendiri.
b). Ganti tulisan yang berwarna merah (Judul widget pada saat tampil), jika tidak di ganti juga tidak masalah.
c). Ganti tulisan berwarna biru dengan lama waktu pop up Fanspage sobat muncul dan menghilang.

3). Setelah selesai dengan point-point di atas, lalu save....

Oke terimakasih semoga tutorial kali ini dari Kang Fandi dapat bermanfaat bagi Sobat Blogger.

http://www.waroenkblog.com/2013/11/cara-pasang-pop-up-facebook-melayang.html

Terima kasih telah membaca artikel Cara Pasang Like Fanspage Melayang di Blog . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Pasang Like Fanspage Melayang di Blog sebagai sumbernya atau anda bisa copy permalink dibawah ini.
<a href="https://kang-fandi.blogspot.com/2014/01/cara-pasang-like-fanspage-melayang-di.html">Cara Pasang Like Fanspage Melayang di Blog</a>

Bagikan Artikel Ini : Facebook Google+ Twitter