صندوق البحث بشكل منبثق
صندوق رائع للبحث عن التدوينات بالمدونة
طريقة التركيب
قبل كل شيئ خذ نسخة احتياطية لقالبك
توجة للقالب - تحرير HTML
وابحث عن <body> بالضغط على CTRL+F
واضف الكود التالي تحته مباشرة
<div class="live-search"><form class="searchmein" id="search"><div class="input"><input class="search" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="search" value="اكتب ما تبحث عنه..." /><button class="submit fa fa-search" type="submit" value=""></button></div><button class="fa fa-times" id="close" type="reset" value=""></button></form><div class="search-content"><div class="search-result"></div><div class="more-result">Load more</div></div></div>
ثم ابحث عن ]]></b:skin> واضف الكود التالي فوقة
/* CSS Custom Ajax Search */input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}#search .input .submit:focus,#search .input .submit:hover {background:#2c9bd5;}#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}#search #close:hover {color:rgba(0,0,0,.6);}.search-content{z-index:6;display:none;position:relative}.live-search .search:focus {outline:none;}.search-result{padding:15px;width:90%;margin:0 auto 15px}.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}.search-item img{width:60px;height:60px;float:left;border-radius:4px}.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}.search-item a:hover{color:#069;}.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}li.searchbutton.active {background:transparent;}li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}.more-result a{text-decoration:none;color:#fff;}.more-result:hover a,.more-result a:hover{color:#fff;}.queryword{font-weight:700}
ثم ابحث عن </body> واضف الكود التالي تحته مباشرة
<script type="text/javascript">//<![CDATA[var _0x4d59=["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x63\x6C\x69\x63\x6B","\x66\x6F\x63\x75\x73","\x2E\x73\x65\x61\x72\x63\x68","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x6C\x69\x76\x65\x2D\x73\x65\x61\x72\x63\x68","\x6F\x6E","\x2E\x73\x65\x61\x72\x63\x68\x62\x75\x74\x74\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x63\x6C\x6F\x73\x65"];var mql=window[_0x4d59[1]](_0x4d59[0]);if(mql[_0x4d59[2]]){$(function(){$(_0x4d59[11])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[8]](_0x4d59[7])[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[9])[_0x4d59[10]](_0x4d59[3],function(){$(this)[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[13])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[12]](_0x4d59[7])});});window[_0x4d59[14]]=function(){var _0xce82x2=document[_0x4d59[16]](_0x4d59[15]);if(_0xce82x2==null){window[_0x4d59[18]][_0x4d59[17]]=_0x4d59[19]};_0xce82x2[_0x4d59[20]](_0x4d59[17],_0x4d59[19]);_0xce82x2[_0x4d59[20]](_0x4d59[21],_0x4d59[22]);_0xce82x2[_0x4d59[23]]=_0x4d59[24];};};function findit(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").show(),$(".search-filter").attr("data-query",e),$(".search-result span").show().html("Searching ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".more-result").hide(),doSearch(t,e)}})}else $(".search-content").hide()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw3o9lcUrJCa4MsfZZ9X2KRLLAD79t6uEbwcQVC2oPAxayH51yDnzGHfHTrEUFvxQLQB4YoseKDoqf1me5DZPb2km81eMzzgqdv5A6q5ALrdIm-WLC2RqN7M3y1SrbLPWJtvOTkqjRwX1/s1600/default.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").hide(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".more-result").show()})}else $(".search-result span").show().html("No result"),$(".more-result").hide()}$(".searchmein").submit(function(){return $(".search-item").remove(),findit(),!1}),$(".close-search").click(function(){$(".search-content").hide()}),$(".more-result").click(function(){$(".more-result").hide(),findit()});//]]></script>
بالنهاية اضف الكود التالي بأي مكان تريد
<li class="searchbutton" title="Quick Search"></li>
اي استفسار لاتتردد بالكتابة اسفل
تابعونا للمزيد..
لاكن اولا اخى أريد إزالة محرك البحث فى مدونتى. أريد أن أعرف كل الأكواد الخاصة به
ردحذفقبل الحذف جرب محرك البحث بمدونتي هل تريد مثلها ؟
حذفبكل تأكيد :p
ردحذفاولاً احذف هذا الكود من القالب
ردحذف<div class="search-form" style="display: block;">
<form action="/search" class="searchform" method="get">
<input class="searchbar" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="ابحث في المدونة">
<input class="searchsubmit" type="submit" value="البحث">
</form>
</div>
اضف الاكواد الاعلى غير كود CSS
ابحث عن كود CSS الموجود بمدونتك الحالي
CSS Fixed Search Button
احذفة وضع بدله الكود التالي
/* CSS Custom Ajax Search */
حذفinput[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}
.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}
#search .input .submit:focus,#search .input .submit:hover
{background:#2c9bd5;}
ردحذف#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.live-search .search:focus {outline:none;}
.search-result{padding:15px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.search-item img{width:60px;height:60px;float:left;border-radius:4px}
.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}
.search-item a:hover{color:#069;}
.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}
li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}
li.searchbutton.active {background:transparent;}
li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}
.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}
.more-result a{text-decoration:none;color:#fff;}
.more-result:hover a,.more-result a:hover{color:#fff;}
.queryword{font-weight:700}
.lyco-search {position:relative;padding:0;height:0;margin:0 auto;}
#menu ul li.searchbutton {background:#434e52;margin:0;padding:2px 17px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:left;}
#menu ul li.searchbutton.active {background:#D03F42;color:#fff;}
#menu ul li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;}
#menu ul li.searchbutton.active:after {color:#fff;}
.search-form {display:none;position:fixed;bottom:0;background:#fff;
padding:5px 0;width:100%;z-index:91;margin:0 auto;}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;font-family:Electrolize,ge_ss_threeregular;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
.searchbar:focus {color:#666;}
.searchsubmit {background:#848889;border:none;outline:none;cursor:pointer;
color:#fff;padding:0 25px;font-weight:400;font-size:16px;
font-family:droid arabic kufi;line-height:45px;border-radius:2px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #848889;}
.searchsubmit:active {background:#D03F42;color:#fff;box-shadow:none;border:none;outline:none;}
لم يعمل =( وايضا زر البحث ظهر فى منتصف القائمة @@,
حذفيالغالي الأكواد في التدوينة فقط اضف الأولى والثالث فقط وضيف كود CSS بالتعليقات مع حذف كود اللذي وضعته بالتعليقات
حذف