Membuat Floating Facebook Like Box Di Blogspot

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.

Kodenya Gan:

<style type="text/css">
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_ty35T8WpciBbiJQF2uBzQIy_tgQIKLMKABVGnQEO6T3QFDOQbiRUBoeyO37HPyDhhACAWXDLTpxxhBeJWFd_hbbVE-pTJE4ixILQYxMWi2QvCu5jjxkm_x4FoZ5ieb7aaKf_aJ6MKGJ/');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/AVvXsEiIhUq-1_HXh0c_ma51-0dNUL9fMbx8Nmqfb31i9qBAeRXK2SDvvaan7ueHlYFvF9Iat4QwIjzIyK9EeJep5_c-d5wW1PPWhpDfm7bOn78f3cyuzq_cE7LmA8yIQxS85PnwhAxhWZqDPguw/');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"

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

<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'/>

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.

Kodenya Gan :

<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.

Well, cukup gampang bukan membuat widget melayang Facebook Like Box  ini ? Sekian dulu tips blogging kali ini, happy nice blogging on Saturday Night !!

Cara Membuat Live Chat di Blog

Bingung juga mau memberi judul apa. Intinya kita akan membuat live chat blog seperti yang ada di facebook., Kamu pun juga bisa memasangnya dengan bantuan pihak ketiga yaitu envolve.com

1. Caranya yang pertama kamu daftar dulu di envolve.com
2. Setelah itu verivikasi akun envolve pada akun emailmu
3. Kemudian masuk ke my sites - add new sites. Perlu diingat saat kamu isikan url blogmu pada add new site sebaiknya kamu sedang tidak membuka akun bloggermu, atau logout dulu akun bloggermu. Karena waktu itu saat saya sedang add new site bersamaan dengan akun blogger malah terjadi eror.
4. Setelah sukses menambahkan url blog mu di envolve , nanti akan disuruh memilih platform blog kamu seperti wordpress, joomla, tumblr. Karena tidak ada platorm blogger disana kamu bisa pilih yang other.
5. Setelah itu coppy kodenya.
6. Lalu sign in ke akun blogger kamu
7. Masuk template - edit html - centang pada expand template widget
8. cari kode <head> ,gunakan ctrl+f  untuk mempermudah pencarian
9. setelah itu pastekan kode envolve tadi diatas kode <head>  pada html tempate kamu
10. selesai..!!

Semoga sukses.. Mohon maaf tidak disertakan tutorial gambar karena menurut saya tutorial ini mudah dilakukan, sekalipun tanpa tutorial disini :)