Membuat Bing's Image Search Result Widget Responsive

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

Ada 2 jenis widget yang diberikan ialah Collage dan Slideshow. Setelah dicoba ternyata cukup menarik juga, namun sayang widget ini tidak responsive. Kemudian aku coba untuk menciptakan widgetnya menjadi responsive. Seperti yang ada di halaman Get Image Widget, arahan widget Bing's image search results ini tampak menyerupai arahan 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 arahan width:100% pada arahan data-style="border;none;" sehingga menjadi menyerupai 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 usang untuk memunculkan gambarnya. Demonya sanggup Anda lihat pada iframe JsFiddle di bawah ini dengan penelusuran "Pangandaran Beach".

Sumber https://www.kompiajaib.com/

Share this post