Beranda
Blogger

Cara Membuat Live Search Box di Blogger

arsipbiru_membuat-live-search-box-di-blogger

Arsipbiru.com - Selamat datang di Arsipbiru, blog sederhana yang membahas tentang blogging, tutorial, dan akuntansi. Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat live search box di Blogger. Live search box adalah variasi dari kotak pencarian (search box) yang menampilkan query secara langsung di muka. Bedanya dengan kotak pencarian pada umumnya adalah live search box dapat menampilkan query yang berkaitan secara langsung dengan kata yang hendak dicari. Sedangkan, search box pada umumnya harus menekan tombol Enter terlebih dahulu untuk menuju ke halaman query pencarian. Dengan adanya live search box, tentunya dapat memudahkan pengunjung untuk mencari artikel di blog secara langsung. Sehingga pengunjung tidak perlu repot-repot menekan tombol Enter dan menuju ke halaman query pencarian untuk menemukan artikel yang dicari.


Live search box ini dilengkapi dengan fitur animasi sehingga membuat search box terlihat lebih keren dan profesional. Live search box ini juga mendukung fitur lazyload sehingga tidak memberatkan blog. Untuk membuatnya sendiri di blog, caranya terbilang cukup mudah. Pastikan template Anda sudah ada search box. Jika template Anda sudah terdapat search box, Anda tidak perlu mengotak-atik search box bawaan template Anda. Anda cukup menambahkan kode CSS dan JS yang akan saya bagikan di bawah ini. Namun, jika belum, Anda perlu menambahkan search box terlebih dahulu.


Nah, jika Anda tertarik ingin membuat live search box di blog, silahkan ikuti langkah-langkahnya berikut ini dengan seksama.

Cara Membuat Live Search Box di Blogger

Demi menjaga dari hal-hal yang tidak diinginkan seperti error pada template, alangkah baiknya Anda cadangkan terlebih dahulu template Anda. Sehingga jika terdapat error, Anda dapat memulihkannya dengan cepat.


1. Pertama, silahkan masuk ke Blogger.


2. Pilih menu Tema > klik icon segitiga terbalik di samping menu Sesuaikan > klik Edit HTML.


3. Tambahkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>

/* ajax search */

.ajax-search.hidden{display:none}

.ajax-search{padding:20px 10px;background:rgba(255,255,255,.89)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:0 15px 10px -10px rgba(155,155,155,0.15),0 -15px 10px -10px rgba(155,155,155,0.15);max-height:450px!important;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}

.ajax-search-results-empty{text-align:center}

.ajax-search h3{color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}

.ajax-search-results{text-align:left}

.ajax-search li{background:#fff;position:relative;display:inline-block;width:100%;padding:10px;margin:5px 5px 5px -15px;border-radius:5px;border:1px solid rgba(155,155,155,0.15);overflow:hidden;transition:all .3s}

.ajax-search li:hover{border-color:#f89000}

.ajax-search li h4{font-size:13px;font-weight:500;margin:0 15px 0 0}

.ajax-search li h4 a{color:#000;transition:all .3s}

.ajax-search li h4 mark{background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}

.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f89000}

.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:#f89000;color:#fff;font-size:13px;padding:7px 15px;border-radius:5px;margin:15px 3px 0 3px}

.ajax-search-pager{overflow:hidden;clear:both;position:relative}.ajax-search li:nth-child(odd){animation:bounceInLeft 1.5s}

.ajax-search li:nth-child(even){animation:bounceInRight 1.5s}

/* animasi */

@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}

@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}

@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}

/* css darkmode sesuaikan class ( .drK ) jika berbeda agar dapat berfungsi */

.drK .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}

.drK .ajax-search li h4 a{color:#fff}

.drK .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}

.drK .ajax-search-pager a{background:#294db4;color:#fff;border:0}

.drK .ajax-search-pager a:hover{background:#1c2733;color:#fff}

.drK .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}

.drK .ajax-search li:hover{background:#1e1e1e}

.drK .ajax-search h3{color:#fff}

4. Selanjutnya, tambahkan kode JavaScript berikut ini di atas atau sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/

// live search dengan defer

function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&amp;image=true&amp;url=https://www.arsipbiru.com",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",liveSearchDefer,!1):window.attachEvent?window.attachEvent("onload",liveSearchDefer):window.onload=liveSearchDefer; function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);

/*]]>*/</script>

Silahkan ganti https://www.arsipbiru.com dengan URL blog Anda.


5. Jika ingin menggunakan lazyload, gunakan kode JavaScript berikut ini.

<script>/*<![CDATA[*/

// live search dengan lazyload

var liveSearchLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===liveSearchLazy||0!=document.body.scrollTop&&!1===liveSearchLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&amp;image=true&amp;url=https://www.arsipbiru.com";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);

/*]]>*/</script>

Silahkan ganti https://www.arsipbiru.com dengan URL blog Anda.

Jika menggunakan lazyload, pengunjung harus menggulir ke bawah agar live search dapat berjalan sebagaimana mestinya.

6. Terakhir, klik Simpan Tema

Cara Membuat Live Search Box di Median UI

Tidak sedikit pengguna yang telah menggunakan template Median UI buatan JagoDesain. Bisa jadi Anda adalah salah satu penggunanya. Jika Anda salah satu pengguna Median UI, mungkin ketika Anda menerapkan tutorial di atas pada template Median UI, tentu Anda akan menemukan suatu bug yang mana tombol next atau previous pada live search box yang menampilkan hasil telusur artikel mengalami pergeseran dari tempatnya berada. Hal tersebut dikarenakan search box Median UI menggunakan onfocus. Sehingga ketika kita tab secara bebas pada layar, otomatis search box akan terhidden.


Untuk mengatasinya, Anda perlu mengubah search box Median UI yang menggunakan onfocus menjadi add class. Bagi pengguna Median UI 1.6 dapat menyesuaikan. Berikut langkah-langkah untuk membuat live search box pada Median UI.


1. Pertama, pastikan Anda sudah masuk ke akun Blogger Anda.


2. Lalu pilih menu Tema > klik icon segitiga terbalik di samping menu Sesuaikan > klik Edit HTML.


3. Tambahkan kode CSS berikut ini di ats kode ]]></b:skin> atau </style>

/* ajax search */

.ajax-search.hidden{display:none}

.ajax-search{padding:20px 10px;background:rgba(255,255,255,.89)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:0 15px 10px -10px rgba(155,155,155,0.15),0 -15px 10px -10px rgba(155,155,155,0.15);max-height:450px!important;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}

.ajax-search-results-empty{text-align:center}

.ajax-search h3{color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}

.ajax-search-results{text-align:left}

.ajax-search li{background:#fff;position:relative;display:inline-block;width:100%;padding:10px;margin:5px 5px 5px -15px;border-radius:5px;border:1px solid rgba(155,155,155,0.15);overflow:hidden;transition:all .3s}

.ajax-search li:hover{border-color:#f89000}

.ajax-search li h4{font-size:13px;font-weight:500;margin:0 15px 0 0}

.ajax-search li h4 a{color:#000;transition:all .3s}

.ajax-search li h4 mark{background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}

.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f89000}

.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:#f89000;color:#fff;font-size:13px;padding:7px 15px;border-radius:5px;margin:15px 3px 0 3px}

.ajax-search-pager{overflow:hidden;clear:both;position:relative}.ajax-search li:nth-child(odd){animation:bounceInLeft 1.5s}

.ajax-search li:nth-child(even){animation:bounceInRight 1.5s}

/* animasi */

@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}

@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}

@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}

/* css darkmode sesuaikan class ( .drK ) jika berbeda agar dapat berfungsi */

.drK .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}

.drK .ajax-search li h4 a{color:#fff}

.drK .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}

.drK .ajax-search-pager a{background:#294db4;color:#fff;border:0}

.drK .ajax-search-pager a:hover{background:#1c2733;color:#fff}

.drK .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}

.drK .ajax-search li:hover{background:#1e1e1e}

.drK .ajax-search h3{color:#fff}

4. Selanjutnya, silahkan cari kode CSS berikut ini.
.BlogSearch input:focus{margin-top:0;box-shadow:0 10px 40px rgba(0,0,0,.2)}

5. Kemudian, ganti dengan kode CSS berikut ini.
.BlogSearch input.active{margin-top:0;box-shadow:0 10px 40px rgba(0,0,0,.2)}

6. Selanjutnya, silahkan cari kode HTML berikut ini.
<li class='mS'>
 <label expr:data-text='data:item' for='searchIn'><b:include name='search-icon'/></label>
</li>

7. Kemudian, ganti dengan kode HTML berikut ini.
<li class='mS' onclick='srcIcn()'>
 <label expr:data-text='data:item' for='searchIn'><b:include name='search-icon'/></label>
</li>

8. Lalu, tambahkan kode JavaScript berikut ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
Disini ada dua pilihan kode JavaScript yang dapat Anda pilih sesuai dengan kebutuhan.

Kode JavaScript 1 dengan Defer
<script>/*<![CDATA[*/ 

// live search dengan defer 

function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&amp;image=true&amp;url=https://www.arsipbiru.com",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",liveSearchDefer,!1):window.attachEvent?window.attachEvent("onload",liveSearchDefer):window.onload=liveSearchDefer; function srcClr(){document.querySelector(".BlogSearch input").classList.remove("active"),document.querySelector(".ajax-search").classList.add("hidden")}function srcIcn(){document.querySelector(".BlogSearch input").classList.add("active")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').onclick=function(){srcClr()},document.querySelector(".fCls").onclick=function(){srcClr()},document.querySelector('label[for="searchIn"]').onclick=function(){srcIcn()};

/*]]>*/</script>

Kode JavaScript 2 dengan Lazyload
<script>/*<![CDATA[*/

// live search dengan lazyload

var liveSearchLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===liveSearchLazy||0!=document.body.scrollTop&&!1===liveSearchLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&amp;image=true&amp;url=https://www.arsipbiru.com";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); function srcClr(){document.querySelector(".BlogSearch input").classList.remove("active"),document.querySelector(".ajax-search").classList.add("hidden")}function srcIcn(){document.querySelector(".BlogSearch input").classList.add("active")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').onclick=function(){srcClr()},document.querySelector(".fCls").onclick=function(){srcClr()},document.querySelector('label[for="searchIn"]').onclick=function(){srcIcn()};

/*]]>*/</script>

Silahkan ganti https://www.arsipbiru.com dengan URL blog Anda.


9. Terakhir, klik Simpan Tema.

Demikianlah tutorial bagaimana cara membuat live search box di Blogger. Jika ada saran dan masukan, silahkan berkomentar di bawah ini. Terima kasih atas kunjungannya dan semoga bermanfaat.

Sumber:

Mau donasi lewat mana?

Trakteer Saweria
N/A
Traktir creator minum kopi dengan cara memberikan sedikit donasi.

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details