راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

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





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

صندوق رائع جدا و منبثف يعطي للمدونة احترافية و جمالية بشكل مميز









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








ادخل الى المظهر و قم بالبحث عن </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>



ابحث عن هذا وقم بوضع هذا الكود اسفل <body> انت عند البحث عليه ابحث هكذا  <body








<!-- Start Search overlay --><div class='search-overlay overlay-animation gradient'>
<!-- Overlay content --><div class='search-overlay-content'><h2>للبحث في مدونة هلا تــك</h2><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'/></button></form></div><span class='close'/></div></div></div><!-- End Search overlay --><!-- start web by abdoutech.com --><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> و ضع الكود التالي اعلاه







عبدو تكنولوجي



و قم بالحقظ و مبروك الاضافة



hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان