Membuat Scroll facebook FanPage di Blog


Bagi para blogger mania yang ingin membagi-bagikan facebook FanPage anda sendiri, adalah biasa untuk meletakkan FanPage tersebut di blog. Namun, facebook Fan Page yang kita tahu selama ini kan standart-standart saja alias berada kolom gadget. Nah, kali ini saya akan memberikan tips untuk membuat facebook Fan Page di blogger dengan tampilan unik, yakni di tepi halaman blog. Istilahnya scroll box, jadi bisa dimunculkan atau disembunyikan.

Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah pertama:

i. Dari dashboard > design > edit HTML

ii. Cari kode </head>

iii. Copy dan paste kode di bawah ini sebelum kode </head>

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&#8217; type=’text/javascript’/>

iv. Lalu tutup dan jangan lupa klik Save Template

Langkah kedua:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka

<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(“http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png&#8221;) 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 style=””><div>

<span><a href=”https://duniakorap.wordpress.com/2012/07/14/membuat-scroll-facebook-fanpage-di-blog/”>Tutorial Here</a></span></div></div>

Nota: Gantikan “https://duniakorap.wordpress.com” dengan url FanPage anda.

iii. Save dan lihat hasilnya.

Silahkan dicoba & semoga berhasil🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s