Panduan Memasang Live Search Box di Blogger

Panduan Memasang Live Search Box di Blogger

Hallo semua, pada halaman ini saya akan membagikan cara memasang live searchbox atau kotak pencarian di blogger. Seperti yang kita tahu live searchbox dapat menampilkan query yang berkaitan secara langsung.

Hal tersebut tentu akan mempermudah para pengunjung untuk mencari artikel yang ada pada blog secara langsung. Sehingga mereka tidak perlu repot-repot menekan menu enter untuk menuju ke halaman yang dicari.

Cukup menarik, bukan? Jika kamu ingin memasangnya juga silahkan ikuti langkah-langkahnya dibawah ini:

Panduan Memasang Live Search Box di Blogger

Buka dashboard blogger > tema > edit html lalu salin kode css dibawah ini dan letakan diatas 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 ( .darkMode ) jika berbeda agar dapat berfungsi */
.darkMode .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}
.darkMode .ajax-search li h4 a{color:#fff}
.darkMode .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}
.darkMode .ajax-search-pager a{background:#294db4;color:#fff;border:0}
.darkMode .ajax-search-pager a:hover{background:#1c2733;color:#fff}
.darkMode .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}
.darkMode .ajax-search li:hover{background:#1e1e1e}
.darkMode .ajax-search h3{color:#fff}

Selanjutnya salin javascript dibawah ini dan letakan diatas kode </body>

<script>/*<![CDATA[*/
// live search dengan defer
function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/rekisptra/frame@media903/live-search.js?live=true&amp;image=true&amp;url=https://www.media903.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 yang saya tandai dengan alamat blog kalian, jika sudah silahkan simpan. Cara ini hanya berlaku untuk template yang sudah memiliki searchbox bawaan.

Penutup

Demi menjaga hal yang tidak diinginkan alangkah baiknya membuat cadangan atau backup template agar ketika terjadi kesalahan kita tidak perlu pusing untuk memperbaikinya cukup ganti dengan template yang sudah dibackup.

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.