اضافة افضل محرك بحث في بلوجر

اهلا بكم متابعين مدونة الزعيم في شرح جديد في قسم اضافات بلوجر
اليوم اقدم لكم اضافة جديده وهيا محرك بحث بشكل جديد

طريقة التركيب

اولاا ابحث عن وسم <head/> او </head>

ثم ضع فوقة كود الاستايل التالي 

<style>
/*======================
SEARCH
*/
/* Overlay style */
.search-overlay,.menu-overlay{z-index:999999;position:fixed;width:100%;height:100%;opacity:.975;top:0;left:0;background:#f461b0;/* Old browsers */
background:-moz-linear-gradient(45deg,#f461b0 0%,#f37d5f 58%);/* FF3.6-15 */
background:-webkit-linear-gradient(45deg,#f461b0 0%,#f37d5f 58%);/* Chrome10-25,Safari5.1-6 */
background:linear-gradient(45deg,#f461b0 0%,#f37d5f 58%);/* W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f461b0',endColorstr='#f37d5f',GradientType=1 );/* IE6-9 fallback on horizontal gradient */}
.search-overlay-content,.menu-overlay-content{margin-left:48%;text-align:center;position:relative;top:50%;height:60%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
/* Effects */
.site{overflow:auto;margin:auto;width:100%;-webkit-transition:transform 0.7s ease;-moz-transition:transform 0.7s ease;-o-transition:transform 0.7s ease;transition:transform 0.7s ease;-webkit-transform-origin:50% 250px 0;-moz-transform-origin:50% 250px 0;-o-transform-origin:50% 250px 0;transform-origin:50% 250px 0}
.site.open{position:fixed;top:0;left:0;transform:scale3d(0.9,0.9,0.9);-webkit-transform:scale3d(0.9,0.9,0.9);-moz-transform:scale3d(0.9,0.9,0.9);-ms-transform:scale3d(0.9,0.9,0.9);-o-transform:scale3d(0.9,0.9,0.9);-webkit-box-shadow:0 0 46px #000000;-moz-box-shadow:0 0 46px #000000;box-shadow:0 0 46px #000000}
.overlay-animation{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.4s ease-in-out,visibility 0s 0.4s;transition:transform 0.4s ease-in-out,visibility 0s 0.4s}
.overlay-animation.open{visibility:visible;-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.7s ease-in-out;transition:transform 0.7s ease-in-out}
@media screen and (max-height:30.5em){.overlay nav{height:70%;font-size:34px}.overlay ul li{min-height:34px}}
.search-wrapper,.menu-wrapper{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}
.search-wrapper .input-holder{height:70px;width:70px;overflow:hidden;background:rgba(255,255,255,0);border-radius:6px;position:relative;transition:all 0.3s ease-in-out}
.search-wrapper.active .input-holder{width:450px;border-radius:50px;background:rgba(0,0,0,0.4);transition:all .5s cubic-bezier(0.000,0.105,0.035,1.570)}
.search-wrapper .input-holder .search-input{width:100%;height:50px;padding:0 20px 0 70px;opacity:0;position:absolute;top:0;left:0;background:transparent;box-sizing:border-box;border:none;outline:none;font-family:font-abdoutech23;font-size:16px;font-weight:400;line-height:20px;color:#FFF;transform:translate(0,60px);transition:all .3s cubic-bezier(0.000,0.105,0.035,1.570);transition-delay:1s}
.search-wrapper .input-holder .fa{color:#2d130d}
.search-wrapper.active .input-holder .search-input{opacity:1;transform:translate(0,10px)}
.search-wrapper .input-holder .search-icon{width:70px;height:70px;border:none;border-radius:6px;background:#FFF;padding:0;outline:none;position:relative;z-index:2;float:left;cursor:pointer;transition:all 0.7s ease-in-out}
.search-wrapper.active .input-holder .search-icon{width:50px;height:50px;margin:10px;border-radius:30px}
.search-wrapper .close,.menu-wrapper .close{color:#fff;position:absolute;z-index:1;top:24px;right:20px;width:25px;height:25px;cursor:pointer;transform:rotate(-180deg);transition:all .3s cubic-bezier(0.285,-0.450,0.935,0.110);transition-delay:0.2s}
.search-wrapper.active .close,.menu-wrapper.active .close{right:-50px;transform:rotate(45deg);transition:all .6s cubic-bezier(0.000,0.105,0.035,1.570);transition-delay:0.5s}
.search-wrapper .close::before,.search-wrapper .close::after,.menu-wrapper .close::before,.menu-wrapper .close::after{position:absolute;content:'';background:#fff;border-radius:2px}
.search-wrapper .close::before,.menu-wrapper .close::before{width:5px;height:25px;left:10px;top:0}
.search-wrapper .close::after,.menu-wrapper .close::after{width:25px;height:5px;left:0;top:10px}
.post-thumb:after{background:linear-gradient(45deg,#e5192c,#0070c6);opacity:0.4;pointer-events:none;position:absolute;content:'';width:100%;height:100%;left:0;top:0;vertical-align:top}
.toggle-search .search-button{left:0;right:auto}
@media screen and (max-width: 850px) {.toggle-search .search-button
font-size: 16px;}}
.toggle-search .search-button{color:#444;font-size:18px;cursor:pointer;width:60px;height:60px;line-height:60px;text-align:center}
</style>

بعد تركيب الاستايل تبحث علي وسم بداية البودي وتضع فوقة الكود التالي

ابحث عن <body> او <body

<!-- Start Search overlay -->
<div class='search-overlay overlay-animation gradient'>
<!-- Overlay content -->
<div class='search-overlay-content'>
<div class='search-wrapper'>
<div class='input-holder'>
<form action='/search' id='searchform' method='get' role='search'>
<input class='search-input' id='s' name='s' placeholder='إبحث في الموقع…' type='text' value=''/>
<button class='search-icon' id='searchsubmit' type='submit'><i class='fa fa-search'></i></button>
</form>
</div>
<span class='close'></span>
</div>
</div>
</div>
<!-- End Search overlay -->
<!-- start web by Al zaa3iim -->
<div class='site' id='page'>

الان ضع هذا في المكان الذي تريد ضهور فيه زر السيرش

<!-- #site-navigation -->
<div class='toggle-search fadeIn wow' data-wow-delay='.25s' data-wow-duration='1s'>
<i class='search-button fa fa-search'></i>
</div>

الان ضع هذا فوق ال </body>

<script>
//<![CDATA[
    /* -----------------------------------------
    Background Overlay
    ----------------------------------------- */
    var container = $('.search-wrapper');
    $( '.toggle-search' ).on( 'click', function( event ) {
        $('.search-overlay').toggleClass( 'open' );
         $('.site').toggleClass( 'open' );
        container.addClass('active');

    });

    $( '.close' ).on( 'click', function( event ) {
        $('.search-overlay').removeClass( 'open' );
        $('.site').removeClass( 'open' );
        container.removeClass('active');

    });

//]]>
</script>

والان مبروك عليك تم تركيب الاضافة بنجاح وان واجهتك اي مشكلة لا تتردد ب وضع مشكلتك في الكومنت وسارد عليك ب حلها ان شاء الله