Join Our Telegram Group to connect with bigger community. Join Now!

Table of Content

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

How To Add Live Search To Your Blogger Website

ব্লগারের আরো একটি পর্বে আপনাদের সবাইকে স্বাগতম। আজকের এই পোস্ট এ একটু ভিন্নধর্মী কিছু নিয়ে কথা বলব। আর তা হলো কিভাবে আপনি আপনার গুগল ব্লগারের যে ডিফল্ট সার্চ বক্স আছে তার পরবর্তীতে কিভাবে সেখানে একটি লাইভ সার্চ বক্স এড করতে পারবেন। তার মানে যখনি কেও আপনার ব্লগারের সার্চ বক্সে কিছু টাইপ করবে তার রেজাল্ট আপনা আপনি দেখানো শুরু করবে। এর জন্য লিখার পর আর কোনো ক্লিক করা লাগবে না। এর মাধ্যমে আপনার ব্লগার ইউজাররা তাদের কাজ দ্রুত সম্পন্ন করতে পারবে এবং আপনার সাইটের মধ্যে একটি ভালো প্রফেশনালিজম চলে আসবে।

ব্লগারে লাইভ সার্চ বক্স যোগ করবেন কিভাবে? Add live search box to blogger ajax - Peak Fiction ,, Add live search box to blogger ajax,, How To Add Live Search To Your Blogger Website

Add live search box to blogger ajax

এইখানে দেওয়া স্টেপ গুলো সবাই ভালো করে ফলো করবেন এবং কোনো কোডিং করার আগে আপনার ব্লগার থিম এর একটি ব্যাকআপ রেখে নিবেন। 
  • স্টেপ ১:
আপনার থিম থেকে "Edit Html" অপশনে যান এবং ]]></b:skin> লিখে সার্চ করুন। এবং নিচের দেওয়া কোড গুলো ]]></b:skin> এর উপর পেস্ট করে দিন।
/* 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}
  • স্টেপ ২:
আবারো </body> লিখে সার্চ করুন এবং নিচের দেওয়া কোড গুলো এর উপর পেস্ট করে দিন। এবং মার্ক করা জায়গায় Peakfiction.top এর জায়গায় আপনার নিজ ওয়েবসাইট এর লিংক লাগিয়ে দিন।
<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>
  • স্টেপ ৩: আপনার থিমটি সেভ করে দিন এবং আপনি পেয়ে যাবেন সুন্দর একটি লাইভ সার্চ বক্স।
পোস্টটি ভালো লাগল অবশ্যই কমেন্ট করে জানাবেন। আর কোনো সমস্যা হলে তাও কমেন্ট করে জানাতে পারেন। সমাধান এর চেষ্টা করব। রেফারেন্স : wendycode.

Post a Comment