• 2

Cara Membuat Facebook Comment Box & Like Box Responsif

membuat facebook comment dan like box responsive
Next Post Setelah Ulangan :D

Sekarang lagi musimnya segala sesuatu yang berbau desain responsif: template, theme, layout widget, gambar, bahkan hingga iklan pun kini harus responsif, ya gak? (ke depan akan saya bahas tentang 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 sobat blogger yang menggunakan responsive template, maka mobile template tidak penting, tidak perlu, dan sebaiknya dimatikan, sebab template responsif anda tidak akan berfungsi dengan baik jika mobile template tetap aktif. Konsep responsif adalah 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 aneh 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 aneh bukan? Karena secara default CSS kedua plugin Facebook tersebut belum menggunakan konsep responsif, maka perlu kita lakukan override atau hack agar 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). Jadi daripada membuat definisi lebar, tinggi, dan margin dalam bentuk fixed, cukup gunakan persentase saja, agar widget mengikuti semua aturan wrappernya.
Setelah kuncinya ditemukan, yang perlu dicari adalah class-class yang digunakan oleh facebook comment box dan like box untuk mengatur tampilan plugin. 
Di atas adalah contoh-contoh class yang bisa diambil dari comment box. Ada beberapa class lain yang juga perlu dilihat dan diubah.
Berikut adalah 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 mendapatkan class-class yang dibutuhkan, langkah selanjutnya adalah menambahkan aturan width yang otomatis mengikuti perubahan lebar wrapper dimana widget/plugin disisipkan. Caranya? Cukup berikan aturan width: 100%, beres. Tambahkan !important jika diperlukan untuk memaksa browser mematuhi aturan tersebut.
Jadi kita dapatkan:


.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}


Jika anda pengguna Blogger, letakkan kode di atas diantara tag b:skin di dalam template. Untuk pengguna WordPress yang ingin membuat facebook comment box dan like box responsive, cukup tambahkan kode 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 kode 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 kode di atas tidak berhasil membuat keduanya responsif, ada kemungkinan kode 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 seperti blog ini, tidak perlu dan tidak ada efeknya.

Anda bisa 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).

  • 0

Mengenal Feromon, Alat Komunikasi Semut yang Super Canggih

Semut Sedang Berkomunikasi
Udah Lama Ga Post gan , maklum ulangan nih . Dan baru selesai pagi ini haduh cape .. Kali Ini ane mau share Feromon nih Tau ga ? Simak nih
Oke langsung aja ya gan.

Ada gula ada semut. Pasti pernah dengar peribahasa ini kan? Peribahasa ini ternyata menyimpan fakta yang menarik mengenai semut. Bagaimana caranya semut dapat selalu mengetahui keberadaan gula atau benda-benda lain yang bisanya selalu dikerumuni semut? Jawabannya karena semut memiliki sistem komunikasi yang canggih. Wow, seperti apakah sistem komunikasi itu, apa semut punya handphone seperti manusia? Hehehe, simak duluyuk, penjelasannya.

Feromon, salah satu senyawa kimia hidrokarbon, memiliki peranan penting dalam sistem komunikasi serangga, termasuk semut. Feromon berasal dari kata “fer” yang artinya membawa dan “hormon” sehingga feromon berarti “pembawa hormon”. Feromon adalah isyarat yang digunakan di antara hewan satu spesies dan biasanya diproduksi dalam kelenjar khusus untuk disebarkan. Ada banyak fungsi dari feromon ini, di antaranya sebagai jejak menuju sumber makanan dan sebagai zat tanda bahaya yang disekresikan saat musuh menyerang. Ketika semut menggigit, dia akan meninggalkan feromon ini sebagai penanda bagi koloninya bahwa ada bahaya. Ketika semut menemukan bahan makanan yang ukurannya terlalu besar untuk dibawa sendiri ke sarang, maka dia akan mengeluarkan feromon untuk meminta bantuan teman-temannya. Jika jumlah semut telah cukup, maka mereka akan menggotongnya beramai-ramai ke sarang.

Uniknya, semut yang menemukan jejak feromon dari semut lain untuk menuju sumbermakanan mampu menemukan jalan kembali yang lebih singkat. Biasanya jejak semut penemu sumber makanan berkelok kelok dan panjang, tapi jejak semut- semut berikutnya akan membentuk garis lurus yang lebih singkat. Bagaimana semut dapat melakukannya? Semut menjadikan matahari sebagai kompas dan cabang pohon atau tanda alam lainnya sebagai penunjuk jalan. Semut mengingat tanda-tanda tersebut dengan baik, bahkan semut yang pergi mencari makan pada pagi hari dan baru kembali pada malam harinya pun akan tetap mengenali tanda-tanda yang dilauinya meskipun kondisi berubah.

Setiap koloni semut memiliki bau koloni yang khas. Mereka memiliki senyawa hidrokarbon yang berbeda untuk membedakan jenis koloni mereka. Jika ada semut asing, yang ditandai dengan bau koloni yang berbeda, memasuki sarang semut koloni lain, maka akan diserang dengan asam format, sitronelal, dan zat-zat beracun lain yang diproduksi oleh semut. Namun, jika semut yang datang masih berasal dari spesies yang sama tapi berbeda koloni, keberadaan semut tersebut masih diterima karena dia dianggap sebagai tamu. Ia akan tetap diberi makan, tapi dengan jumlah sedikit. Komunikasi kimiawi dengan feromon ini hanya salah satu cara komunikasi yang dilakukan semut. Semut juga dapat berkomunikasi dengan sentuhan atau dengan bunyi.

Seiring dengan perkembangan ilmu pengetahuan dan teknologi, para ilmuwan telah berhasil mengidentifikasi 1600 jenis feromon pada serangga. Kini, feromon-feromon tersebut sudah dapat dibuat secara sintetis dan digunakan untuk perangkap serangga, khususnya serangga-serangga hama.

Sumber : WoW UniC 

Copyright © 2012 FayumiArt™Template by : Fikri FayumiPowered by Blogger.