أداة البحث في المدونة بالشكل احترافي و تلقائية البحث

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

معاينة الإضافة

طريقة تركيب الإضافة على البلوجر

1. نتوجه الى مدونة ، قالب ، تحرير HTML

2. نبحث عن الكود

</head>

3. نضيف الكود التالي فوقه مباشرة

<style>
/*-------ajax-form---------*/
/* By http://hukmat.blogspot.com */
#ajax-search-form {
float: left;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
padding: 6px 10px 6px;
background: #f8f8f8;
margin: 2px 0 0 -5px;
font: normal 12px ges;
border: 1px solid #000;
}
#ajax-search-form .searchbtn {
background: #e74c3c ;
padding: 6px 10px;
border: 1px solid #000;
font: normal 12px GES;
color: #fff;
cursor: pointer;
}
#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 10px 0;
width: 200px;
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.3em !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}
#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}
</style>

4. نبحث عن الكود

</body>

5. نضيف الكود التالي فوقه ثم نضغط على حفظ .

<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: 'http://www.hukmat.blogspot.com/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>

6. نتوجه الى التخطيط ، اضافة اداة ، JavaScript/HTML

7. ثم نضيف الكود الخاص بالاضافة البحث

<form action='/search' id='ajax-search-form'>
<input class='searchbox' name='q' placeholder='ابحث في ثنايا الموقع' type='text'/>
<input class='searchbtn' type='submit' value='بحث'/>
</form>