Membuat Floating Facebook Like Box Di Blogspot

By / Berbagi Tips Blog / 2 Comments
Hei sobat Blogger Gimana Kabar nya ni...?
pasti baik lah ya... :)
oke kali ini saya mau berbagi tentang bagai mana cara membuat Floating Facebook Like Box Di Blog Sobat
Mau tau cara nya..?
mau tau gaaakkkk sob....
hehehe
Oke langsung aja Ke TKP ya :)



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/AVvXsEjfKueZkr0UREnnJoJs8poxSL0yx66kZiM7seC7lXHU12i28Wz5qX9HhBL7vOgIar39h8qL_rSa6nxvDT2121gu-LGrLvqPMkMxzGCuGMiK7-S7iuSaFJy47pi-O77eNy4eP43oIe-TH6Tn/');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/AVvXsEg8ZVHrbxAKSUdNJO5Quih8Mw-xOaa1uuFRNwEXHwgrCGIwUaGkdiW4jJIjm3BjZN-7nZseiMIQMxpvmj-4HGr4toRa7r08j2s4MsHxE0BKYQwhNA-8g9zXGtvHCHIlf2fhDo-m10YuFUuV/');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">

 <!-- Begin Facebook -->

 CONTENT FACEBOOK HERE

 <!-- End Facebook -->

 </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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

   fjs.parentNode.insertBefore(js, fjs);

 }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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.