Membuat Bing's Image Search Result Widget Responsive

Membuat Bing's Image Search Result Widget Responsive

Bola Hero Gawai

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".

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×