Menambahkan Loading GIF Halaman Hasil Pencarian Google Custom Search

Pada postingan hari ini saya akan mencoba menjawab pertanyaan beberapa sahabat Kompi Ajaib mengenai gambar loading pada halaman hasil pencarian Google Custom Search Kompi Ajaib seperti pada gambar animasi GIF di atas.

Untuk menambahkan gambar loading GIF seperti pada gambar di atas tentunya Anda harus membuat dulu Google Custom Search untuk blog Anda, silahkan simak pada link postingan berikut:

Kemudian silahkan copy kode CSS di bawah ini dan simpan di atas kode </head>


<b:if cond='data:blog.url == &quot;URL Halaman Hasil Pencarian&quot;'>
<style type='text/css'>
.post-body{background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 10% no-repeat!important;padding:20px 0;margin:0}
#gcsengine{margin-top:-30px}
</style>
</b:if>

Silahkan ganti URL Halaman Hasil Pencarian dengan URL halaman hasil pencarian blog Anda.

Jika Anda memiliki gambar ajax-loading sendiri silahkan ganti URL gambar background-nya.

Jadi dalam hal ini kita hanya menambahkan gambar background pada halaman postingan (.post-body). Gambar loading GIF akan tampak sebelum hasil pencarian Google Custom Search muncul. Setelah hasil pencariannya muncul maka gambar dan halaman akan tertutup oleh hasil pencarian Google Custom Search.

Nah demikianlah postingan sederhana cara menambahkan loading GIF pada halaman hasil pencarian Google ustom Search ini semoga membantu dan dapat dimengerti.

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