Halo kawan semua, rasanya menyerupai sudah beberapa tahun tidak update buka-rahasia.blogspot.com. Yah, memang alasannya cukup klise, aktivitas dunia offline, tetapi memang itu kenyataannya. :) Bahkan untuk approve dan menjawab ribuan komentar gres pun belum sanggup ditangani sepenuhnya. Makara bagi anda yang komentarnya belum diterbitkan dan dijawab - terutama komentar penting yang berisi pertanyaan seputar Blogger, Adsense, dan SEO - saya mohon maaf. Beberapa kawan blogger lain lazimnya "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 di saat ini, "RESPONSIVENESS".
Sekarang lagi musimnya segala sesuatu yang berbau desain responsif: template, theme, layout widget, gambar, bahkan sampai iklan pun sekarang mesti responsif, ya gak? (ke depan akan saya diskusikan 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 kawan blogger yang menggunakan responsive template, maka mobile template tidak penting, tidak perlu, dan semestinya dimatikan, karena template responsif anda tidak akan berfungsi dengan baik jikalau mobile template tetap aktif. Konsep responsif merupakan satu untuk semua, artinya satu theme atau template untuk semua device, tidak terpisah-pisah.
Namun demikian, ada satu komponen yang cukup luput dari perhatian. Pernahkah menyaksikan widget Facebook comment box pada template responsif terlihat absurd karena lebar dan tingginya tetap karena tidak ikut responsive? Pernahkah menyaksikan widget facebook like box yang lebarnya melampaui sidebar karena tidak ikut berubah ukuran setelah browser di-resize? Tentu terlihat absurd bukan? Karena secara default CSS kedua plugin Facebook tersebut belum memakai konsep responsif, maka perlu kita jalankan override atau hack biar keduanya mengikuti hukum responsif sesuai template.
Biasanya untuk meraih derajat responsiveness, kita sanggup memakai CSS media queries. Namun dalam hal ini, tidak diperlukan, karena yang diperlukan hanyalah menghasilkan lebar (width) Facebook comment box dan like box mengikuti lebar wrapper dimana keduanya disisipkan (embed). Makara ketimbang menghasilkan definisi lebar, tinggi, dan margin dalam bentuk fixed, cukup gunakan persentase saja, biar widget mengikuti semua hukum wrappernya.
Setelah kuncinya ditemukan, yang perlu dicari merupakan class-class yang digunakan oleh facebook comment box dan like box untuk mengendalikan performa plugin.
Di atas merupakan contoh-contoh class yang sanggup diambil dari comment box. Ada beberapa class lain yang juga perlu dilihat dan diubah.
Berikut merupakan 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 mendapat class-class yang dibutuhkan, langkah berikutnya merupakan menyertakan hukum width yang otomatis mengikuti pergeseran lebar wrapper dimana widget/plugin disisipkan. Caranya? Cukup berikan hukum width: 100%, beres. Tambahkan !important jikalau diinginkan untuk memaksa browser mematuhi hukum tersebut.
Makara kita dapatkan:
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
Jika anda pengguna Blogger, letakkan isyarat di atas diantara tag b:skin di dalam template. Untuk pengguna WordPress yang ingin menghasilkan facebook comment box dan like box responsive, cukup tambahkan isyarat CSS tersebut ke dalam file style.css, atau lokasi custom CSS sesuai yang sudah ditawarkan 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 isyarat 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 sebuah kasus isyarat di atas tidak sukses menghasilkan keduanya responsif, ada kemungkinan isyarat CSS pada FB Comment dan Like Box anda dilingkupi oleh komponen span, ini lazimnya karena penyesuaian 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 imbas 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 memakai template atau theme non-responsive menyerupai blog ini, tidak perlu dan tidak ada efeknya.
Anda sanggup menyaksikan demo Responsive Comment Box di salah satu halaman di syaircinta.com. Coba resize browser dan lihat pergeseran pada Facebook Comment Box (resize memiliki arti merubah 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.
