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

شرح تركيب الأضافة

ادخل الى المظهر و قم بالبحث عن </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: linear-gradient(45deg,#0057a2 0%,#053a67 58%);/* Chrome10-25,Safari5.1-6 */filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#f461b0&#39;,endColorstr=&#39;#f37d5f&#39;,GradientType=1 );/* IE6-9 fallback on horizontal gradient */}.search-overlay-content,.menu-overlay-content{margin-left:0%;    font-size: 25px!important;color: white;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:Cairo, sans-serif;font-size:25px;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:&#39;&#39;;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:&#39;&#39;;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}
.toggle-search .search-button {left: 0;right: auto;background: #2368a1;padding: 10px;color: #eeeeee; font-size: 23px;  float: left;}.toggle-search .search-button:hover { background: #114169;}
</style>