Cara Membuat Search Bar Keren, Optimasi SEO di Blog

 

1. diatas ]]></b:skin>

 
/* Search */
.d-flex{display:flex!important;border:none;}
.thing{transition:.3s all;border:none;}
#feed-input {transition: 0.5s all;width: 100%;padding: 11px 30px;border:none;transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;border-bottom-left-radius: 10px;border-top-left-radius: 10px;text-align-last: center;}
#search-btn {transition: .5s all;transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: rgba(242, 242, 242, 0.9);border:none;color: #22191966;padding: 0 15px;cursor: pointer;border-bottom-right-radius: 10px;border-top-right-radius: 10px;}
#search-container {height:auto;overflow:auto;padding:0;display:none;}
#search-container mark {background-color: transparent;color:#c3002e;text-transform:uppercase;border:none;}
#search-container a {text-decoration:none;color:rgb(246 246 248);font-weight:bold;font-size:1.2rem;display:block;white-space: break-spaces;border:none;}
#search-container a:hover {color:#222;border:none;}
#search-container ol li h3{margin:0 auto .5rem!important;border:none;}
#search-container h4 {display:none;}
#search-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0;}
#search-container li {margin:0 auto 1.5rem;list-style:none;overflow:hidden;word-wrap:break-word;white-space:nowrap;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;border:none;}
#search-container li img {display:block; float:left; margin:auto 1rem auto 0;border:none;}
#search-container li p {display:inline-block;font-size: 1rem;border:none; text-align: left;color:rgb(0 0 0);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:55%;}
#search-loader {color:rgb(246 246 248);display:none;border:none;}
#search-container li p {margin:0;border:none;}
#search-container .closebtn {display:none;border:none;}
input[type="text" i] {padding: 1px 2px;}
input:focus {outline-offset: 0px;}
:focus {outline: -webkit-focus-ring-color auto 1px;}
input {-webkit-writing-mode: horizontal-tb !important;text-rendering: auto;color: -internal-light-dark(black, white);letter-spacing: normal;word-spacing: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;appearance: textfield;background-color:#f7f7f7;-webkit-rtl-ordering: logical;cursor: text;margin: 0em;font: 400 13.3333px Arial;padding: 1px 2px;border-width: 1px;border-style: inset;border-color: #f9f9f9;border-image: initial;}
@media(max-width:768px){#search-container li img{width:100%;margin-bottom:1rem!important;}#search-container li p{width:100%;}#search-container li{border:none;padding:1rem!important;border-radius:.75rem}} 

2. diatas  </head>

 
<script>
jQuery(document).ready(function($) {

 $(&quot;#feed-input&quot;).focus(function(){
   $(this).parent().addClass(&quot;thing&quot;);
   $(&quot;#search-btn&quot;).addClass(&quot;thing&quot;);

  }).blur(function(){
        $(this).parent().removeClass(&quot;thing&quot;).delay(1000);
        $(&quot;#search-btn&quot;).removeClass(&quot;thing&quot;).delay(1000);
  })

});  
</script> 

3. dalam Gadget HTML/JavaScript

 
<form class="d-flex form-search" action="/search" onsubmit="return updateScript();">
<input class="border-radius-left" id="feed-input" name="q" placeholder="Find new ideas with Dakota! " size="40" type="text" />
<button class="border-radius-right" id="search-btn" onkeyup="resetField();" type="submit"><i class="fa fa-search"></i></button>
</form>
<div id='search-container'></div>
<div id='search-loader'>Loading...</div>