Membuat Bing's Image Search Result Widget Responsive

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:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments