Bagaimana Menampilkan Facebook Like yang Cantik?

Kembali dengan Arsip Online Ku sobat. Facebook like adalah sebuah widget yang wajib sepertinya bagi Anda yang ingin mendapatkan fans dan pengunjung blog yang lebih banyak. Karena dengan widget ini, blog kita akan sangat cepat tersebar. Namun, kebanyakan widget facebook like yang ada, kalau saya perhatikan sangat memberatkan blog kita sehingga kecepatan blog kita menjadi lambat. Oleh karena itu, disini saya kasih solusinya dengan membuat facebook like yang cantik tetapi tetap powerfull sehingga tidak memberatkan loading blog Anda. Cara yang terapkan disini saya ambil dari salah satu tutorialnya 24work.blogspot.com.

Contoh Demo nya

Beginilah kira-kira penampilannya.

Live Demo

Bagaimana Cara Membuatnya :

Cara yang akan saya sampaikan disini adalah dengan menggunakan CSS, sehingga saya yakin tidak akan memberatkan loading blog Anda, dan Blog Anda pun tetap Cepat untuk diakses.
Langkah 1. Silahkan Anda login dulu ke Dashboard akun blogger Anda. Kemudian Pilih Layout atau tata letak pada menu disebalah kiri.
Langkah 2. Silahkan klik tombol Add a Gadget. dan pilih yang HTML/JavaScript. Lihat gambar dibawah ini

Langkah 3. Masukkan kode berikut ini kedalam form HTML/JavaScript.

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Ow-ymR6Cwt4ZPngWme_GFulKSG7oD5ekua6TqIbcMgRBcaV9AzCKpCD8P8x4_N28TQRVwBTfqdCZ062AsFvTK7UYZ6U32I8s8ww4poyD53sKDjCxsFNomh6-bZ2CJ3zDroMVRnbMNko3/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>

Langkah 4. Ganti pages%2FBlogspot-tutorial%2F220888831260608 dengan Facebook Anda.
Langkah 5. Simpan/Save. Lalu lihat hasilnya.