أضف إطار البحث المباشر المناسب إلى بلوجر

Search Live هو مربع بحث يقترح تلقائيًا محتوى على مدونتك مباشرة في مربع البحث. هذه الوظيفة مفيدة للغاية بسبب بديهتها. بعد ذلك، سأرشدك لإنشاء إطار بحث مباشر مفيد لـ بلوجر.

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

 انتقل إلى صفحة تحرير HTML الخاصة بـ بلوجر.

 تثبيت JS. ضع العلامة </head> أو موقع js في القالب الخاص بك:

<script>
//<![CDATA[
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $input.on("input", function() {
        var keyword = $input.val();
        if (keyword.trim() === "") {
            $result_container.fadeOut();
        } else {
            $result_container.show().html('Loading...');
            $.ajax({
                url: '//aweywashk.xyz/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
                type: 'get',
                dataType: 'jsonp',
                success: function(json) {
                    var entry = json.feed.entry,
                        link, skeleton = "";
                    if (typeof entry !== "undefined") {
                        skeleton = '<h4>Tìm kiếm cho từ khóa &quot;' + keyword + '&quot;</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;
                                }
                            }
                            skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                        }
                        skeleton += '</ol>';
                        $result_container.html(skeleton);
                    } else {
                        $result_container.html('<a class="close" href="/">&times;</a><strong>Không có kết quả tìm kiếm!</strong>');
                    }
                },
                error: function() {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
                }
            });
        }
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);
//]]>;
</script>

قم بتغيير aweywashk.xyz إلى المجال الخاص بك.

لتجميل الكود أعلاه، ابحث عن الفقرة ]]></b:skin> وألصق ملف CSS أدناه عليها.

#ajax-search-form {
    position: relative;
    font: normal normal 13px/normal Arial,Sans-Serif;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    padding: 10px;
    width: 302px;
    height: 15px;
    color: #333;
    border-radius: 7px;
    border-right: 0;
    float: left;
    background: #dddddd;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
}
#ajax-search-form input {
    width: 310px;
    float: left;
    background: transparent;
    font-size: 12px;
    line-height: 16px;
    border: 0;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"]{
    margin-left: -32px;
    margin-top: -5px;
    opacity: 0;
    width: 26px;
    height: 26px;
    cursor: pointer;
}
#search-result {
    border: 1px solid #ddd;
    background-color: white;
    padding: 10px 15px;
    margin: 2px 0;
    width: auto;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    box-shadow: 0 1px 3px rgb(183 183 183 / 40%);
    display: none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result .close {
    display: block;
    position: absolute;
    top: 6px;
    right: 10px;
    color: #ca252b;
    font-size: 20px;
}
#search-result strong {color:#B75252}
.fa-search {
    width: 13px;
    margin: 0 0 5px -25px;}

أضف الكود التالي حيث يجب عرضه

<form action="/search" id="ajax-search-form">
<input aria-label="Tìm kiếm trong blog này" autocomplete="off" class="inputsearch left text" id="search-input" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Tìm kiếm trong blog này...">
</form>

ببساطة، باستخدام الخطوات المذكورة أعلاه، يمكنك إضافة إطار Search Live مناسب إلى بلوجر الخاص بك.

معاينة

كيف كان المقال؟