السلام عليكم ورحمة الله تعالى وبركاته
اهلا ومرحبا بكم متابعى مدونة نصائح للمدونين
اليوم باذن الله تعالى اقدم لكم شئ جديد جدا وحصرى
ومهم لكل صاحب مدونة على بلوجر
اليوم اقدم لكم محرك بحث بتقنية Ajax لمدونات بلوجر
فمحرك البحث هو من الاشياء الاساسية والمهمة فى اى مدونة
فهو يسهل على الزوار الوصول لما يريدون بدون جهد او تعب
واكثر ما يميز محرك البحث الذى أتيت به اليوم هو انه يعرض لك نتائج البحث فى نفس الصفحة
دون الانتقال لأى صفحة أخرى وانت تختار ما تريد من النتائج
نمر الى طريقة تركيبه
خطوات تركيب محرك البحث
الخطوة الأولى : نقوم بالبحث عن وسم </b:skin>
ونضيف قبله هذا الكود
/*-------ajax-form---------*/
.search {
overflow: hidden;
position: absolute;
left: 13%;
float: none;
z-index: 9999;
width:300px;
}
#ajax-search-form {
position:relative;
font:normal normal 13px/normal Arial,Sans-Serif;
float:right;
margin-top: 2px;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
border: none;
padding: 10px;
font: normal 12px tahoma;
border-radius: 0 3px 3px 0;
transition: 0.4s;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMe00X563vncOc8QlenbJjJz2aDIE9ZXknNqjCz2yQaXXJa-RPVzkNASqjUBoV5LbtsuvpcSdFy_lwCwkwZLprlUIJd58exOZMx6w4ftYG4_fHzNUaFZ3oifqTdFFnHg2d0vIQV-E0zL6/s1600/search.png) no-repeat 4%;
width: 216px;
margin: 0;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form .searchbtn {
width: auto;
background-color: #04BCBC;
border: none;
font: normal 12px tahoma;
cursor: pointer;
padding: 10px 20px;
margin: 0 -4px 0 0;
border-radius: 3px 0 0 3px;
color: #FFF;
}
#ajax-search-form .searchbtn:hover{background-color:#444}
#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 10px 0;
width: 278px;
height: auto;
position: relative;
top: 0;
left: 0;
max-height:310px;
overflow:auto;
z-index: 99;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: none;
}
#search-result li {
padding: 10px;
border: 1px dotted #EEE;
color: #AAA;
font-size: 0px;
line-height: 1em;
margin: 0 0 5px 5px;
overflow: hidden;
}
#search-result img {
float:right;
margin: 0 0 0 8px;
border: 3px solid #EEE;
}
#ajax-search-form a {
color: #888;
line-height: 1.9em !important;
font: normal 12px tahoma;
text-decoration: none;
padding: 0;
}
#search-result ol,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4, #search-result strong {
display: block;
margin: 0 0 10px 0;
font: normal 12px ges,tahoma;
color: #BF4247;
}
#search-result ol {margin:0;
text-align:right;
}
#search-result ol a:hover {
color: #BF4247;
text-decoration: underline;
background: none;
}
#search-result .close {
display: block;
position: absolute;
top: 0;
left: 10px;
line-height: normal;
color: #f00;
font-size: 18px;
}
#search-result strong {color:#B75252}
#blog-pager {
margin: 1em 0;
text-align: center;
overflow: hidden;
clear: both;
}
الخطوة الثانية : نقوم بالبحث عن وسم <body/>
ونضيف قبله هذا الكود
<script type='text/javascript'>
//<![CDATA[
(function($) {
var $form = $('#ajax-search-form'),
$input = $form.find(':text');
// Append a search result container to the search form
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');
// When the keyword is submitted...
$form.on("submit", function() {
// Get the input value
var keyword = $input.val();
// Show the search result container and insert a `Loading...` text
$result_container.show().html('جاري عملية البحث...');
// Get the blog JSON via $.ajax() to show the search result
// The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
$.ajax({
url: 'feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
// If success, grab the search result list...
success: function(json) {
var entry = json.feed.entry,
link, summary, thumbnail, skeleton = "";
if (entry !== undefined) {
skeleton = '<h4> البحث عن مقالات حسب التصنيف “' + keyword + '”</h4>';
skeleton += '<a class="close" href="/">×</a><ol>';
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
summary = summary.length > 100 ? summary.substring(0, 100) + '…' : summary;
skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
}
skeleton += '</ol>';
$result_container.html(skeleton);
} else {
// If the JSON is empty ... (entry === undefined)
// Show the `not found` or `no result` message
$result_container.html('<a class="close" href="/">×</a><strong>المعذرة يبدو ان ما تبحث عنه غير موجود بالموقع :(</strong>');
}
},
error: function() {
// If error, show an error message
$result_container.html('<a class="close" href="/">×</a><strong>خطأ في عملية البحث المرجوا المحاولة لاحقا.</strong>');
}
});
return false;
});
// Fade out the search result container if the close button is clicked
$form.on("click", ".close", function() {
$result_container.fadeOut();
return false;
});
})(jQuery);
//]]>
</script>
اسبدل الرابط الملون بالأحمر برابط مدونتك
الخطوة الثالثة : نقوم بالبحث عن وسم <head>
ونضيف بعده هذا الكود
ملحوظة : اذا كان لديك هذا الكود فلا تضيفه
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
اذا كان لديك كود محرك بحث قديم فإبحث عنه أو إن لم تعرف الكود الخاص به إبحث عن : div id='search'>
وحذف الكود من بداية الوسم إلى إغلاقه وضع الكود التالي مكانه
<div id='search'>
<form action='/search' id='ajax-search-form'>
<input class='searchbox' name='q' placeholder='اابحث عن قالب أو شرح...' type='text'/>
<input class='searchbtn' type='submit' value='بحث'/>
</form>
</div>
وهنا يمكنك الحفظ ومبروك عليك الاضافة ومبروك عليك محرك بحث مطور
وجميل وانيق من مدونة نصائح للمدونين
تم النشر يوم
السبت، 14 نوفمبر 2015 ' الساعة
ليست هناك تعليقات:
إرسال تعليق