Bagaimana Cara Buat Facebook Fan Page

Cara Membuat Facebook Fan Page di Blogspot

Tutorial: Membuat Facebook fan page widget ini pada blog anda, bila pengunjung melawat blog anda dan bila mereka hala sahaja cursor pada ikon Facebook tersebut seperti gambar kat bawah, widget tersebut akan bergerak ke kiri dan ke kanan.

 

Dibawah ini adalah contoh gambarajah Facebook Fan Page Sliding. 

Contoh Fan Page Sliding

1. Log in akaun blogger dan klik drop down menu.

2. Selepas tu pilih "Layout".
3. Sekarang klik "Add Gadget".
4. Pilih  "HTML/Javascript"
5. Copy & Paste semua code dibawah :

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKVUhUKfJ6K9mucNBXDst7m6fmS2qUIo5XzVzVfLxkOfDZuezSULkzzMAaoBcyV0RUihyCi6AniPpayu1d8nkgkgWQE4sRZYiMvsBGsWLozLJkt6Xy9sSBO9kkzFmwjEcjgZEFSRlN7DU/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(md){
md(document).ready(function(){
var $dur = "medium"; // Duration of Animation
md("#fbplikebox").css({right: -250, "top" : 100 })
md("#fbplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKelab-PAP-UTM%2F250504138399699&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true">
</iframe>
<span>
</span></div>
</div>

6. Save.

*Nota : Ubah Kelab-PAP-UTM dengan id FB anda.

Contohnya: http://www.facebook.com/KPAPUTM
http://www.facebook.com/yourFBID

   float : right atau float : left 

Sekarang klik preview, untuk melihat Facebook Fan Page Sliding berfungsi atau tidak dalam blog anda.

Sekiranya anda mengikuti langkah-langkah yang betul, insha allah ia berfungsi dengan baik, jika tidak akan berlaku sebaliknya, widget tersebut akan muncul di bahagian mana?, sidebar kiri atau kanan. 

Nota: sila share tutorial ini dengan rakan-rakan, jika anda mendapati  ia kalau sebaliknya sudi-sudilah komen di bawah...


O.k Selesai...Itu sahaja...selamat mencuba.