Cara Membuat Widget Like Facebook Dengan Pop Up JQuery

Cara Membuat Widget Like Facebook Dengan Pop Up JQuery

Seperti yang kita tahu Facebook merupakan salah satu jejaring sosial yang sangat digemari para penikmat dunia internet. Facebook juga sangat familiar dengan para blogger/webmaster dengan menyediakan berbagai macam Widget yang bisa diintregasikan langsung dalam Blog/Website.

Nah salah satunya adalah Widget Like Facebook dengan Pop Up JQuery yang sangat mengagumkan berikut ini, tampilannya sangat bagus dan terlihat sangat profesional. Padahal cukup sederhana Cara Membuat Widget Like Facebook Dengan Pop Up JQuery ini.

Oke langsung saja saya kasih tahu bagaimana Cara Membuat Widget Like Facebook Dengan Pop Up JQuery di Blogger, berikut ini langkahnya:


Langkah 1 : Login ke Blogger >> Dashboard >> Tata Letak
Langkah 2 : Pilih Add Gadget >> HTML Javascript
Langkah 3 : Kemudian masukkan kode di bawah ini ke kotak yang muncul :

<!-- sajakrerindu.blogspot.com Likebox Pro FBFan Code Start -->

<style>#fblikepop{background-widcolor:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:400px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:150%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:150%;width:100%;top:0;left:0;background:#000000;z-index:100;}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}#fblikepop #actionHolder{height:70px;overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> 

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">

//<![CDATA[

sajakrerindu01username="KataMutiaraDanMotivasi",

sajakrerindu01title="Sambil Nunggu Loading Like Yuk ^^",

sajakrerindu01skin="02",

sajakrerindu01time="10",

sajakrerindu01wait="0",

sajakrerindu01lang="id"

//]]>

</script>

<script type="text/javascript" src="http://sajakrerindu.xtgem.com/js/likefb.js"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){$().sajakrerindu({ closeable: true });});

//]]>

</script>

<!-- sajakrerindu.blogspot.Com Likebox Pro FBFan Code End -->

Sebelumnya edit dulu Kode Widget Like Facebook Dengan Pop Up JQuery yang berwarna merah diatas, keterangannya sebagai berikut:

sajakrerindu01username="isi dengan username fans page sobat",  

sajakrerindu01title="isi dengan judul/tulisan pada menu widget",

sajakrerindu01time="isi dengan waktu menutup widget otomatis(detik)", 

$(document).ready(function(){$().sajakrerindu({ closeable: true });});  (jika true berarti ada tombol close, jika false tidak ada tombol close)

Catatan: Jangan ubah kode lain selain yang berwarna merah meskipun hanya tanda koma(,) maupun petik(") karena Widget Like Facebook Dengan Pop Up JQuery ini tidak akan bisa tampil alias Error. Karena saya membuat Widget Like Facebook Dengan Pop Up JQuery ini dengan javascript yang valid.

Untuk melihat Demo Widget Like Facebook Dengan Pop Up JQuery pada Blog silakan klik disini.

Oke sekian dulu Tutorial Cara Membuat Widget Like Facebook Dengan Pop Up JQuery dari saya, jika ada kendala silakan tulis di kolom komentar, semoga bermanfaat ^^