Skip to main content
KOMPI AJAIB

follow us

Membuat Bing's Image Search Result Widget Responsive

Baca juga:

Bing's Image Search Result Widget
Sudah lama saya tidak main ke Bing Webmaster Tool. Dan ketika kali ini saya mengunjunginya, ada sesuatu yang baru yang cukup menarik perhatian saya. Adalah Get Image Widget yang terdapat di sidebar homepage Bing Webmaster. Ketika ditelusuri, kita masuk ke halaman konfigurasi untuk mendapatkan dan mengatur widget Bing's image search results yang cukup menarik. Bisa Anda lihat DI SINI.

Ada 2 jenis widget yang diberikan yaitu Collage dan Slideshow. Setelah dicoba ternyata cukup menarik juga, namun sayang widget ini tidak responsive. Kemudian saya coba untuk membuat widgetnya menjadi responsive. Seperti yang ada di halaman Get Image Widget, kode widget Bing's image search results ini tampak seperti kode di bawah ini.


<div class="bingwidget" data-type="images" data-query="Pangandaran Beach" data-layout="slideshow" data-count="10" data-height="360px" data-width="640px" data-color="#000000" data-safesearch="moderate" data-version="0.9" data-style="border:none;"></div><script type="text/javascript" src="//www.bing.com/widget/bootstrap.js" async></script>

Nah untuk membuatnya responsive cukup mudah, silahkan tambahkan kode width:100% pada kode data-style="border;none;" sehingga menjadi seperti di bawah ini.


<div class="bingwidget" data-type="images" data-query="Pangandaran Beach" data-layout="slideshow" data-count="10" data-height="360px" data-width="640px" data-color="#000000" data-safesearch="moderate" data-version="0.9" data-style="border:none;width:100%"></div><script type="text/javascript" src="//www.bing.com/widget/bootstrap.js" async="async"></script>

Kebetulan widget ini mendukung asynchronous pada js-nya jadi kemunculannya tidak mengganggu loading blog, namun memang agak lama untuk memunculkan gambarnya. Demonya bisa Anda lihat pada iframe JsFiddle di bawah ini dengan penelusuran "Pangandaran Beach".

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar