MEMBUAT WIDGET LIKE FACEBOOK PAGE

Terimakasih sudah mampir ke blog ini, sebelumnya saya mau jelaskan dulu, APA ITU FACBOOK PAGE?? facebook page adalah halaman khusus yang di sediakan oleh pihak facebook, bertujuan untuk mempermudah orang terutama para pengunjung blog, dan pemilik blog berhubungan. selain dengan facebook profil yang dimiliki pribadi oleh sang pemilik page tersebut. anda belum punya facebook page ? bisa baca disini.

Jika anda sudah mempunyai facebook fans page ini,
anda bisa membuat widge like page seperti yang ada pada gambar atau blog saya ini.
Langsung saja di simak.

 

TUTORIAL

• Login terlebih dahulu ke akun blog anda.
• Kemudia pilih Template, lalu pilih Edit HTML.
• cari kode </head>, gunakan [ CTRL + F] untuk mempermudah pencarian.
• Pasang kode Jquery Berikut tepat diatas kode </head> tadi. 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
• jika kode ini sudah ada, tidak perlu copy - paste kode Jquery ini lagi.
• kemudian SAVE atau SIMPAN.
• Lalu pilih MENU, Tata Letak, Klik Add Gadget, Tambahkan Widget HTML.
• Kemudian, copy dan paste kode di bawah ini. (ingat! tidak perlu memakai nama).
• Kemudia simpan.

<!-- Start Like Facebook Fans Page --!>
<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:370px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http://i1347.photobucket.com/albums/p704/artaa666/iconfb3_zpsc5ce1567.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 = 20
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/ngurahinsane666 &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">
 <a href="http://ngurah-insane.blogspot.com/2014/02/membuat-widget-like-facebook-page.html" target="_blank">Get This Widget Here !</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>20</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End Like Facebook Fans Page --!>

keterangan:

• warna pink, 320px, 370px, 300, 300px : lebar dan ketinggian widget.
• warna orange, : gambar jempol, bisa di ganti sesuai selera.
• warna merah, var sec = 20 dan 20, Seconds : lama waktu dan text yang akan di tampilkan.
• warna hijau,  Join us on Facebook : judul widget yang akan terlihat pada kotak like.
• warna kuning : alamat atau URL facebook page anda.
• warna ungu , Cancel : judul tombol bisa anda ganti sesuai selera.

SELAMAT MENCOBA, SEMOGA BERHASIL

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg