تركيب محرك بحث احترافي لقوالب البلوجر منزلق

#search-icon{

    position:absolute;

    right:18px;

    top:5px;

    display:block;

    width:46px;

    line-height:46px;

    height:46px;

    background-color:rgba(255,255,255,0.1);

    color:#fff;

    font-size:14px;

    text-align:center;

    cursor:pointer

}

 #nav-search{

     position: absolute;

     right: 0;

     top: 59px;

     z-index: 50;

     display: none;

     width: 364px;

     height: 60px;

     background-color: #103254;

     border-bottom: 2px solid #000000;

     transition: all 0s ease;

     -webkit-transition: all 0s ease;

     -moz-transition: all 0s ease;

     -o-transition: all 0s ease;

     padding-top: 13px;

}

 #s{

    position:relative;

    height:35px;

    padding-left:12px;

    padding-right:12px;

    border:none;

    background-color:rgb(0 0 0 / 73%);

    font-size:15px;

    color:#fff;

    font-family:inherit;

    border:1px solid #24486c;

    width:74%;

    margin:0 4px 0 18px

}

 #searchsubmit:hover{

    background-color:rgba(0,0,0,0.1)

}

 #searchsubmit{

    position:absolute;

    right:17px;

    top:14px;

    height:36px;

    padding:0 10px;

    color:#fff;

    background-color:#2496EE;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

    border:none;

    cursor:pointer;

    transition:background .3s;

    border-radius:2px;

    width:118px

}

 #nav-search #searchform{

    display:block;

    background:rgba(0,0,0,0);

    margin:0 auto;

    height:42px;

    box-sizing:border-box;

    overflow:hidden;

    padding:0;

    border:0;

    border-radius:0 5px 5px 0

}

 button.searchsubmit{

    width:56px;

    height:33px;

    font-size:17px;

    cursor:pointer;

    background:#4182c5;

    transition:all .1s ease;

    border:1px solid #548fcb;

    border-radius:3px;

    color:white

}

 button.searchsubmit:hover{

    background-color:rgb(0 0 0 / 73%);

    border:1px solid #24486c

}

<script type='text/javascript'>

//<![CDATA[// Scripts

$(document)

  

  var _0x22d5 = [ "menu-item-has-children", "addClass", "", "parent", "", '"></span>', "append", "#main-nav .menu-item-has-children > a", '"><i class="fa fa-navicon"></i></div>', "prepend", "", "click", "slideToggle", "#main-nav ul", "on", "#menu-icon", "width", ":hidden", "is", "style", "removeAttr", "resize", "#nav-search", "#search-icon", "", "", "", "", "", "", "", "<div class=''/>", "", "", "<span></span>", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", '"]', "", '"]', "", '"]', "", "", "ready",];

jQuery(document)[_0x22d5[64]](function(a) {

    a(_0x22d5[4])[_0x22d5[3]](_0x22d5[2])[_0x22d5[1]](_0x22d5[0]);

    a(_0x22d5[7])[_0x22d5[6]](_0x22d5[5]);

    a(_0x22d5[10])[_0x22d5[9]](_0x22d5[8]);

    a(_0x22d5[15])[_0x22d5[14]](_0x22d5[11], function() {

        a(_0x22d5[13])[_0x22d5[12]](250);

    });

    a(window)[_0x22d5[21]](function() {

        var b = a(window)[_0x22d5[16]]();

        var c = a(_0x22d5[13]);

        if (b > 1010 && c[_0x22d5[18]](_0x22d5[17])) c[_0x22d5[20]](_0x22d5[19]);

    });

    a(_0x22d5[23])[_0x22d5[14]](_0x22d5[11], function() {

        a(_0x22d5[22])[_0x22d5[12]](250);

    });

    var b = a(_0x22d5[25])[_0x22d5[24]]();

    a(_0x22d5[25])[_0x22d5[28]](function() {

        if (0 === this[_0x22d5[27]][_0x22d5[26]]) this[_0x22d5[27]] = b;

    });

    a(_0x22d5[25])[_0x22d5[30]](function() {

        if (this[_0x22d5[27]] === b) this[_0x22d5[27]] = _0x22d5[29];

    });

    a(_0x22d5[33])[_0x22d5[32]](_0x22d5[31]);

    a(_0x22d5[35])[_0x22d5[6]](_0x22d5[34]);

    a(_0x22d5[36])[_0x22d5[32]](_0x22d5[31]);

    a(_0x22d5[37])[_0x22d5[6]](_0x22d5[34]);

    a(_0x22d5[47])[_0x22d5[46]](function() {

        a(this)[_0x22d5[45]](_0x22d5[44])[_0x22d5[41]](_0x22d5[19], function(a, b) {

            return b[_0x22d5[40]](_0x22d5[42], _0x22d5[43]);

        })[_0x22d5[41]](_0x22d5[19], function(a, b) {

            return b[_0x22d5[40]](_0x22d5[38], _0x22d5[39]);

        });

    });

    a(this)[_0x22d5[45]](_0x22d5[50])[_0x22d5[41]](_0x22d5[48], function(a, b) {

        return b[_0x22d5[40]](_0x22d5[38], _0x22d5[49]);

    });

    a(_0x22d5[53])[_0x22d5[11]](function() {

        a(_0x22d5[52])[_0x22d5[51]]({

            scrollTop: 0

        }, 800);

        return false;

    });

    a(_0x22d5[57])[_0x22d5[56]](a(_0x22d5[55])[_0x22d5[54]]());

    a(_0x22d5[55])[_0x22d5[54]](_0x22d5[29]);

    a(_0x22d5[59])[_0x22d5[56]](a(_0x22d5[58])[_0x22d5[54]]());

    a(_0x22d5[58])[_0x22d5[54]](_0x22d5[29]);

    a(_0x22d5[61])[_0x22d5[56]](a(_0x22d5[60])[_0x22d5[54]]());

    a(_0x22d5[60])[_0x22d5[54]](_0x22d5[29]);

    a(document)[_0x22d5[64]](function(a) {

        a(_0x22d5[63])[_0x22d5[62]]();

    });

});

  

 //]]>

</script> 

    <span id='search-icon'><i class='fa fa-search'/></span>

<div id='nav-search'>

<form action='/search/max-results=7' id='searchform' method='get'>

  <input id='s' name='q' placeholder='أدخل كلمة للبحث...' type='text'/>

 <button class='searchsubmit' type='submit'><i class='fa fa-search'/></button> 

</form> 

</div>