Halo teman semua, rasanya menyerupai sudah bertahun-tahun tidak update buka-rahasia.blogspot.com. Yah, memang alasannya cukup klise, kesibukan dunia offline, tapi memang itu kenyataannya. :) Bahkan untuk approve dan menjawab ribuan komentar gres pun belum mampu dilakukan sepenuhnya. Kaprikornus buat anda yang komentarnya belum diterbitkan dan dijawab - khususnya komentar penting yang berisi pertanyaan seputar Blogger, Adsense, dan SEO - saya mohon maaf. Beberapa teman blogger lain biasanya "mengakali" dengan menyambangi akun facebook saya, dan menanyakan beberapa hal. :)
Recommendation:Jika anda belum memiliki Facebook Comment Box di Blogger, simak Cara Memasang Facebook Comment Box di Blogger
Baik, mari pribadi menuju topik yang sedang hangat-hangatnya ketika ini, "RESPONSIVENESS".
Sekarang lagi musimnya segala sesuatu yang berbau desain responsif: template, theme, layout widget, gambar, bahkan sampai iklan pun kini harus responsif, ya gak? (ke depan akan saya bahas wacana layout responsif pada iklan Google Adsense, baik yang synchronous maupun asynchronous). Untuk blog ini, saya membiarkannya ala kadarnya saja lah :). Hehe. Saya mengandalkan mobile template yang masih cukup efektif. Tapi bagi teman blogger yang menggunakan responsive template, maka mobile template tidak penting, tidak perlu, dan sebaiknya dimatikan, karena template responsif anda tidak akan berfungsi dengan baik jikalau mobile template tetap aktif. Konsep responsif yaitu satu untuk semua, artinya satu theme atau template untuk semua device, tidak terpisah-pisah.
Namun demikian, ada satu elemen yang cukup luput dari perhatian. Pernahkah melihat widget Facebook comment box pada template responsif tampak asing karena lebar dan tingginya tetap lantaran tidak ikut responsive? Pernahkah melihat widget facebook like box yang lebarnya melebihi sidebar karena tidak ikut berubah ukuran setelah browser di-resize? Tentu tampak asing bukan? Karena secara default CSS kedua plugin Facebook tersebut belum menggunakan konsep responsif, maka perlu kita lakukan override atau hack supaya keduanya mengikuti aturan responsif sesuai template.
Biasanya untuk mencapai derajat responsiveness, kita dapat menggunakan CSS media queries. Namun dalam hal ini, tidak diperlukan, karena yang dibutuhkan hanyalah membuat lebar (width) Facebook comment box dan like box mengikuti lebar wrapper dimana keduanya disisipkan (embed). Kaprikornus daripada membuat definisi lebar, tinggi, dan margin dalam bentuk fixed, cukup gunakan persentase saja, supaya widget mengikuti semua aturan wrappernya.
Setelah kuncinya ditemukan, yang perlu dicari yaitu class-class yang digunakan oleh facebook comment box dan like box untuk mengatur tampilan plugin.
Di atas yaitu contoh-contoh class yang mampu diambil dari comment box. Ada beberapa class lain yang juga perlu dilihat dan diubah.
Berikut yaitu 4 yang pokok dari styling comment box dan like box:
- fb-comments
- fb-comments iframe[style]
- fb-like-box
- fb-like-box iframe[style]
Setelah menerima class-class yang dibutuhkan, langkah selanjutnya yaitu menambahkan aturan width yang otomatis mengikuti perubahan lebar wrapper dimana widget/plugin disisipkan. Caranya? Cukup berikan aturan width: 100%, beres. Tambahkan !important jikalau diharapkan untuk memaksa browser mematuhi aturan tersebut.
Kaprikornus kita dapatkan:
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
Jika anda pengguna Blogger, letakkan arahan di atas diantara tag b:skin di dalam template. Untuk pengguna WordPress yang ingin membuat facebook comment box dan like box responsive, cukup tambahkan arahan CSS tersebut ke dalam file style.css, atau lokasi custom CSS sesuai yang telah disediakan oleh theme atau plugin anda.
Jika ingin menggunakannya secara terpisah dari CSS lain, baik pada Blogger maupun WordPress, gunakan tag style pada CSS. Cari </head> di dalam template, dan letakkan arahan berikut di atasnya.
<style type="text/css">
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
</style>
Note:
- Blogger: Dashboard > Template > Edit HTML > Ctrl+F, cari </head>
- WordPress: Dashboard > Appearance > Editor > Header.php > Ctrl+F, cari </head>
Jika dalam suatu kasus arahan di atas tidak berhasil membuat keduanya responsif, ada kemungkinan arahan CSS pada FB Comment dan Like Box anda dilingkupi oleh elemen span, ini biasanya karena modifikasi oleh plugin. Ganti dengan class-class berikut:
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
Tentunya efek responsif pada comment box dan like box mengikuti template atau theme yang responsif, jadi ini tidak berlaku pada template atau theme non-responsive. Bagi anda yang menggunakan template atau theme non-responsive menyerupai blog ini, tidak perlu dan tidak ada efeknya.
Anda mampu melihat demo Responsive Comment Box di salah satu halaman di syaircinta.com. Coba resize browser dan lihat perubahan pada Facebook Comment Box (resize berarti mengubah ukuran browser, bukan zoom in dan zoom out).
That's it and have a nice blogging.
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.