Cara Membuat Fan Page Facebook di Sisi Blog

Cara Membuat Fan Page Facebook di Sisi Blog
Kotak Like facebook page ini cukup keren dan cukup unik, karena facebook page atau halaman facebook akan muncul jika kursor pointer di arahkan ke kotak atau tulisan facebooknya, dan akan menutup kembali jika kursor mouse di arahkan ke tempat lain. Memang sudah banyak yang memakai widget ini, namun tidak ada salahnya jika saya kembali menuliskan artikel tentang cara bagaimana membuat widget facebook likebox yang menempel di sisi blog ini, siapa tahu ada sobat blogger yang belum tahu dan ingin membuat widget seperti ini.

Widget ini menurut saya sangat cocok diterapkan pada blog yang banyak widgetnya di sidebar. Sehingga tidak begitu banyak memakan tempat. Dari segi estetika keindahan tampilan blog juga cukup bagus. Cara memasangnya juga cukup mudah karena tidak perlu masuk ke edit HTML, hanya tinggal menambahkan gadget di sidebar.

Untuk live demonya bisa sobat lihat di sini
Oke langsung saja kita ikuti tutorial cara membuat kotak like facebook page menempel di sisi blog.

1. Masuk ke akun blogger > Rancangan > Tambah Gadget > pilih HTML/Javascript.
    copy paste kode di bawah ini:

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4kgrR9gHa3KkqGcHzHqHXHiKTC_B1kOqBg2zh9ND_rDpaufl-z3OzJmcoCEztobH80nJWRupT7KdHPOZdCK_GeO884ft7gKFgKP5k7ydWPqNVi_PwCbYlggLHa0QiRDfVPV9VnuV1ChD/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fazkaveiro&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://azka-veiro.blogspot.com/2012/07/cara-membuat-fan-page-facebook-di-sisi.html/>Azkaveiro</a></span></div></div>

 2. Klik Pratinjau, lalu simpan template. Selesai.

Catatan:

Silahkan ganti kata azkaveiro dengan username halaman facebook sobat sendiri. Untuk mengetahui cara merubah username halaman facebook silakan buka artikel cara mengganti username akun facebook.

Nah bagaimana... sudah jadi khan... hehehe, Happy Blogging !!!

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Fan Page Facebook di Sisi Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://azka-veiro.blogspot.com/2012/07/cara-membuat-fan-page-facebook-di-sisi.html" target="_blank">Cara Membuat Fan Page Facebook di Sisi Blog</a>

:: Get this widget ! ::