Merubah Tampilan Like Box Facebook

Like Box Facebook, sudah pada buat belum. Plugin atau widget yang satu ini banyak di minati untuk mempromosikan page (laman) website atau blog di dalam facebook.

Namun, tampilannya yang standar dan sederhana itu terkadang bikin boring juga (he he he) ga selalu sich, terkadang he.

Pertanyaannya bisa nggak yah merubah tampilan facebook like box ini, supaya kelihatan lebih menarik??

Jawabannya bisa!!. Berikut adalah caranya yaitu dengan sedikit menambahkan fungsi div class, dan CSS yang di sematkan di dalam EDIT HTML blogger Anda.

Untuk sementara saya hanya membuat empat buah tampilan, silahkan di pilih.. di pilih sesuai dengan kesukan anda. Mungkin jika kapan2 postingan ini di minati saya akan menambahnya dengan tampilan lain yang tidak kalau menarik, oke here we go...

Untuk melihat sample ke-4 tampilan like box facebook ini anda bisa klik di sini

Oke gimana, dari ke-4 itu ada yang memincut ketertarikan anda, ada?? oke sebelumnya pastikan anda telah membuat Like Box facebook ini terlebih dahulu, kalau belum tahu caranya bisa lihat di Tutorial Membuat Facebook Like Box (page like box facebook)

Jika sudah ambil kode IFRAME nya, contoh punya saya seperti ini :

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCipta-Karya-Mandiri%2F141239745900727&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>

Note : fungsi div class yang saya tambahkan di bold dengan warna merah. <div class="fb-like-box"> (di awal kode) dan di tutup dengan </div> (di akhir kode)

Oke sekarang tambahkan fungsi div class nya sehingga tampilan seluruh kode menjadi seperti ini.

<div class="fb-like-box"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCipta-Karya-Mandiri%2F141239745900727&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></div>

• sekarang copy semua kode script di atas.
• Login ke dasbor blogger Anda.
• KLIK Tata Letak --- Pilih Tambah Gadget --- HTML/Javascript.
• Pastekan kode tersebut dan simpan.

Lho kok belum berubah?? sabar.. sabar tinggal di sesuaikan di CSS nya saja caranya... nymbung ke page berikutnya...

---

Page 1 of 2. | 1 | 2 | next>

---