recent
أخبار ساخنة

كيفية اضافة محرك بحث احترافي يعمل بخاصية ajax لمدونات بلوجر

AnisRyad05
الصفحة الرئيسية
محرك البحث بالتأكيد من أهم الإضافات التى يجب أن تكون فى مدونتك بكل تأكيد وهذا بسبب أن هذه الإضافة تعتبر من أهم أضافة المواقع المدونات واليوم سوف أعرض لكم فى هذا الموضوع محرك بحث أحترافى بشكل خرافى يعمل بشكل منبثق أى بمعنى أنك عندما تضغط على زر البحث سوف تظهر لك قائمة بمحرك البحث فى منتصف الصفحة وتكتب ما تريد البحث عنه وسوف يعرض لك النتائج بدون أن يتم تحميل صفحة جديد .

وايضا محرك البحث هذا يعمل بخاصية الـ Ajax الأحترافية لتجعل من محرك البحث أكثر جماليه مع اضافة ايضا تأثيرات أحترافيه تجعل منه أكثر جازبيه لزوار مدونتك .

ومحرك البحث هذا سوف يجعل من مدونتك أكثر أحترافي يجعل زوار مدونتك يعجبون كثيرا بمدونتك وايضا محرك البحث عن تبحث به سوف يعرض لك النتائج فى صفحة منبثقه كما قلت لك وهذا يجعله أكثر أحترافية ويمكنك معاينة الإضافة من الرابط فى الإسفل وتحميل الأكواد الخاص بها .





معاينة الإضافة وتحميل الاكواد

يمكنك من هنا معاينة الإضافة وتحميل الكواد الخاصه بها حتى تستطيع تركيب الإضافة


صورة من الإضافة




شرح التركيب



  • سوف  تقوم أول بالبحث عن هذا الوسم]]></b:skin>ثم تقوم بوضع الكود التالى فوقه هذا هو كود الأستايل الخاص بمحرك البحث .


/* CSS Custom Ajax Search  by wdbloog.blogspot.com */
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:right;border-radius:4px}
.search-item a{width:calc(100% - 80px);float:left;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;
  cursor: pointer;
  float: left;
  color: #fff;
  width: 33px;
  display: block;
  text-align: center;
  height: 33px;
  line-height: 33px;
  margin-top: 3px;
  transition: 0.2s;
  margin-right: 2px;
  border-radius: 50%;
  background: #465769;
}
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: 14px;
  color: #fff;
}
.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>ثم قوم بوضع الكود التالى فوقه واذا لم تجده أبحث عنه هكذا<body .


<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">
تحميل المزيد</div>
</div>
</div>
  • الأن هذا الكود ايضا سوف تقوم بوضع فى المكان الذى تريده وهو الخاص بالمكان الذى سوف يظهر به زر محرك البحث يمكنك وضع كما تريد فى أى مكان أم فى القائمة الرئيسية أو القائمة العلوية أو أى مكان تريده ويمكنك مناسب لك .


<li class="searchbutton" title="Cari artikel"></li>


  • الأن مع كود الجافا سكربت وهذا الكود يمكنك وضعه مريتن فى قالب مدونتك لان فى بعض القوالب لن يعمل محرك البحث بوضع الكود مرة واحد لذلك أولا سوف تقوم بالبحث عن هذا الوسم</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/AVvXsEgFnmcA1Bdy9TV7_ajGkmEjzHBkZrCF3JFQTL6wNQOG1apodVc-QCvjfgS7Yarph36mGue_tKIIPgLM9A4QpcCD7gW9wpVZVlvdwhpEVhCwWzavHKKnG0eKvYDAFX-j8IUBtKXIcjRWT3Qj/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>


  • الأن سوف تقوم بحفظ القالب وتقوم بتجرب محرك البحث ، واذا لم يعمل سوف تقوم بوضع الكود مرة اخر ولكن هذه المرة فوق هذا الوسم </head>واذا لم تجده سوف تقوم بالبحث عنه هكذا/headايضا .


<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/AVvXsEgFnmcA1Bdy9TV7_ajGkmEjzHBkZrCF3JFQTL6wNQOG1apodVc-QCvjfgS7Yarph36mGue_tKIIPgLM9A4QpcCD7gW9wpVZVlvdwhpEVhCwWzavHKKnG0eKvYDAFX-j8IUBtKXIcjRWT3Qj/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>


  • وبعد ذلك سوف تقوم بحث القالب وتعاينة محرك البحث وسوف تجده يعمل معك بدون اى مشكلة بأذن الله كما فى المعاينة .


هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .
google-playkhamsatmostaqltradent