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.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser