ব্লগারে লাইভ সার্চ বক্স যোগ করবেন কিভাবে? Add live search box to blogger ajax - Peak Fiction

• স্টেপ ১:

/* 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}

/* animation */

@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 adjust 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}

• স্টেপ ২:

<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.peakfiction.top";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>

• স্টেপ ৩: আপনার থিমটি সেভ করে দিন এবং আপনি পেয়ে যাবেন সুন্দর একটি লাইভ সার্চ বক্স।