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

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


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



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


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> نتائج البحث عن   &#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>


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>

8. تمت العملية يالنجاح ، جميع الحقوق محفوظة لمدونة حكمات .

مقالات ذات صلة

Previous
Next Post »

5 التعليقات

التعليقات
8/21/2014 delete

اخى عندما انزل الى الاسفل فى مدونتك القائمة تنزل
اريد هذه
شاهد الصورة:http://im57.gulfup.com/yBcD5j.png

Reply
avatar
8/21/2014 delete

شاهد هذا الموضوع فبه كل ما تحتاجه
http://hukmat.blogspot.com/2014/03/make-the-nav-main-menu-with-a-moving-descent-Blog.html

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا