Cara Menambahkan Fitur Ajax Search di Blog - Arlina Design
Assalamualaikum, kali ini Arlina Design akan berbagi tips Cara Menambahkan Fitur Ajax Search di Blog yang saya temukan di blognya Taufik Nurrohman (www.dte.web.id).

Cara Menambahkan Fitur Ajax Search di Blog

Fitur Ajax ini memiliki banyak kelebihan jika dibandingkan dengan opsi penelusuran biasa, salah satunya adalah bisa memuat daftar artikel secara otomatis tanpa perlu menekan tombol search atau enter sesuai dengan kata kunci yang kita cari. Cukup menarik bukan? Bagi yang penasaran, mari kita simak tips berikut ini.

Cara Menambahkan Fitur Ajax Search di Blog


Seperti yang saya sebutkan sebelumnya, cara kerja dari Fitur Ajax Search ini adalah memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya seperti gambar di bawah ini :

Cara Menambahkan Fitur Ajax Search di Blog

Ketika sobat menulis kata kunci game di kolom penelusuran, maka yang keluar adalah daftar dari artikel yang terkait dengan kata kunci tersebut. Nah sudah faham kan? Oke.

Pertama buka Blogger > Klik menu Tema dan klik Edit HTML. Selanjutnya, sobat hanya perlu menambahkan link di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan otomatis akan langsung bekerja pada kolom penelusuran di blog sobat.

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true'/>

Dan saya juga telah sedikit memodifikasi dengan menambahkan CSS agar tampilannya terlihat lebih menarik. Tambahkan kode di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Ajax Search */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ajax-search{padding:20px;background:#fff!important;box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}
.ajax-search h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}
.ajax-search li{position:relative;display:inline-block;float:left;width:50%;margin:0 0 10px 0;overflow:hidden}
.ajax-search li h4{font-size:13px;font-weight:normal;margin:0 15px 0 0}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f44336}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-block;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}
.ajax-search-pager a:hover{background:#333;color:#fff}
@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-block;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}
</style>

Klik Simpan tema dan selesai.

Untuk melihat hasilnya, sobat bisa kunjungi link Result di bawah ini, di link tersebut saya menambahkan parameter url dari blog www.teknomatch.com.


Pengaturan


Berikut beberapa opsi parameter dari Fitur Ajax Search yang bisa sobat gunakan sesuai kebutuhan.

Opsi Keterangan
live Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis sampai sobat menekan tombol search atau enter.
url Ganti nilainya dengan alamat blog sobat atau alamat blog lain yang ingin sobat tampilkan.
image Ganti nilainya menjadi true untuk menampilkan gambar artikel.
target Jika bernilai "_blank", semua link akan terbuka di tab baru.

Untuk opsi selengkapnya, sobat bisa kunjungi blog DTE :] di artikel ini

Contoh dari opsi paramenter yang saya tambahkan seperti : live=true dan image=true

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true'/>

Jika sobat ingin menambahkan parameter lain seperti url, sobat hanya perlu menambahkan &amp; sebagai pembatas antar parameter. Contohnya seperti ini :

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true&amp;url=https://www.nama_blog.com'/>

Sebaiknya nanti sobat hosting ulang kode yang ada di link ini https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js dan cari ID blog ini 5382492177374539930 kemudian ganti dengan ID blog sobat.

Oke, sekian dari saya tentang Cara Menambahkan Fitur Ajax Search di Blog. Semoga bermanfaat dan wassalam.

Cara Menambahkan Fitur Ajax Search di Blog

Assalamualaikum, kali ini Arlina Design akan berbagi tips Cara Menambahkan Fitur Ajax Search di Blog yang saya temukan di blognya Taufik Nurrohman (www.dte.web.id).

Cara Menambahkan Fitur Ajax Search di Blog

Fitur Ajax ini memiliki banyak kelebihan jika dibandingkan dengan opsi penelusuran biasa, salah satunya adalah bisa memuat daftar artikel secara otomatis tanpa perlu menekan tombol search atau enter sesuai dengan kata kunci yang kita cari. Cukup menarik bukan? Bagi yang penasaran, mari kita simak tips berikut ini.

Cara Menambahkan Fitur Ajax Search di Blog


Seperti yang saya sebutkan sebelumnya, cara kerja dari Fitur Ajax Search ini adalah memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya seperti gambar di bawah ini :

Cara Menambahkan Fitur Ajax Search di Blog

Ketika sobat menulis kata kunci game di kolom penelusuran, maka yang keluar adalah daftar dari artikel yang terkait dengan kata kunci tersebut. Nah sudah faham kan? Oke.

Pertama buka Blogger > Klik menu Tema dan klik Edit HTML. Selanjutnya, sobat hanya perlu menambahkan link di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan otomatis akan langsung bekerja pada kolom penelusuran di blog sobat.

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true'/>

Dan saya juga telah sedikit memodifikasi dengan menambahkan CSS agar tampilannya terlihat lebih menarik. Tambahkan kode di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Ajax Search */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ajax-search{padding:20px;background:#fff!important;box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}
.ajax-search h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}
.ajax-search li{position:relative;display:inline-block;float:left;width:50%;margin:0 0 10px 0;overflow:hidden}
.ajax-search li h4{font-size:13px;font-weight:normal;margin:0 15px 0 0}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f44336}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-block;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}
.ajax-search-pager a:hover{background:#333;color:#fff}
@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-block;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}
</style>

Klik Simpan tema dan selesai.

Untuk melihat hasilnya, sobat bisa kunjungi link Result di bawah ini, di link tersebut saya menambahkan parameter url dari blog www.teknomatch.com.


Pengaturan


Berikut beberapa opsi parameter dari Fitur Ajax Search yang bisa sobat gunakan sesuai kebutuhan.

Opsi Keterangan
live Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis sampai sobat menekan tombol search atau enter.
url Ganti nilainya dengan alamat blog sobat atau alamat blog lain yang ingin sobat tampilkan.
image Ganti nilainya menjadi true untuk menampilkan gambar artikel.
target Jika bernilai "_blank", semua link akan terbuka di tab baru.

Untuk opsi selengkapnya, sobat bisa kunjungi blog DTE :] di artikel ini

Contoh dari opsi paramenter yang saya tambahkan seperti : live=true dan image=true

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true'/>

Jika sobat ingin menambahkan parameter lain seperti url, sobat hanya perlu menambahkan &amp; sebagai pembatas antar parameter. Contohnya seperti ini :

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true&amp;url=https://www.nama_blog.com'/>

Sebaiknya nanti sobat hosting ulang kode yang ada di link ini https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js dan cari ID blog ini 5382492177374539930 kemudian ganti dengan ID blog sobat.

Oke, sekian dari saya tentang Cara Menambahkan Fitur Ajax Search di Blog. Semoga bermanfaat dan wassalam.

Related Post

Disqus Codes
  • 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

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo