Cara Membuat Widget Melayang Facebook Like Box

Posted by : Asep Muharam Kamis, 09 Februari 2012

Tips Membuat Floating Facebook Like Box - Widget melayang Facebook Like Box kali ini lebih simple dan ringan daripada widget-widget melayang lain yang pernah saya coba. Menempatkan widget dengan cara disembunyikan atau widget floating/melayang selain menghemat tempat pada sidebar juga dimaksudkan supaya tidak menghambat kecepatan loading awal blog pada saat dibuka. Floating Facebook Like Box ini saya dapatkan saat melancong ke blog tetangga dari Uruguay (jauh sekalee..!) yang full stylish banget. So mumpung masih fresh mendingan langsung bagi-bagi aja buat sobat blogger yang mungkin kepingin memasang widget melayang Facebook Like Box di blognya.

Cara Membuat Widget Melayang Facebook Like Box

1. Sebelumnya anda harus sudah mendaftar dan mendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.

2. Login ke dashboard blogger anda.

3. Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).

4. Copy script widget dibawah ini dan paste pada gadget.

<style type="text/css">

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi895OioK10IijV9Lllztscv0sHQ44iqzlyTFqQyqKaFE48f7gIb-YHrEdYBneq3APvaH_Do5M_C0Im0Djdqy4Yy_bOHNE5jHVQBjHf4S2zZD04ckzT_lNJyGYCFG16D_AiQlvyZp2UYzkM/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpn9aINi0uQdeHO4Sh1R8WQFnUafMJCMxBvaudlyhBqaXWpyLisVCo8k-2v1JLVa25qma68uJexBZMUrwsYGsS-69LlH8t778GDAU6htDlb8wHsc2ZQgajAKaAEiNvRcYmzR5_3fEdmgdQ/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">



CONTENT FACEBOOK HERE



</div>

</div>

5. Ganti tulisan CONTENT FACEBOOK HERE dengan kode Facebook Like Box anda.

6. Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript dibawah ini dan letakkan tepat diatas kode </head> pada template supaya widget Facebook Like Box ini bisa berfungsi.

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

7. Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook.

8. Save / Simpan.

Well, cukup gampang bukan membuat widget melayang Facebook Like Box

Sumber : http://rayhanzhampiet.blogspot.com/2011/12/membuat-floating-facebook-like-box.html