محرك بحث متطور بتقنية |BLOGGER | ajax

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

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

شرح طريقة التركيب

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

/*-------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/AVvXsEhpw5UglHdjK0vIZrXbsIKPMnqamOK2K2YBPnRRsopUxktlJRgyh8AhgM5KfHffK1Oe6LGXf0sPVbAKu87yVmxlv6xHt_yAMd9SKEoPekjGxq7jSX83Fyh1yhCrL-Q1CRG98xvYen80QS7-/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;
}

4. ابحث عن : <body/>

3. ضع الكود التالي قبله [ فوقه ]

<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.ar1web.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> البحث عن مقالات حسب التصنيف  &#8220;' + keyword + '&#8221;</h4>';
                    skeleton += '<a class="close" href="/">&times;</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) + '&hellip;' : 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="/">&times;</a><strong>المعذرة يبدو ان ما تبحث عنه غير موجود بالموقع :(</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</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>

4. ابحث عن : ar1web.com وغيره برابط موقعك

5. ابحث عن : <head>

*  إذا كان لديك الكود التالي فلا داعي لتركيبه أو غيره 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

6 . اذا كان لديك كود محرك بحث قديم فإبحث عنه أو إن لم تعرف الكود الخاص به إبحث عن : div id='search'>

7 . وحذف الكود من بداية الوسم إلى إغلاقه وضع الكود التالي مكانه

<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>

 8. وأخيرا يمكنك الحفظ ومبروك عليك الإضافة