Membuat widget pencarian blog dengan jQuery - Widget pencarian atau kotak pencarian pada blog digunakan Saat kamu berkunjung kesebuah blog yang mempunyai konten mencapai ribuan, widget pencarian ini sangat membantu kamu yang menginginkan konten sesuai dengan konten yang sedang kamu cari, jika kamu ingin membuat widget penarian pada blog kamu sendiri caranya cukup mudah, silahkan ikuti langkah langkah berikut ini

Membuat widget pencarian blog dengan jQuery

Buka blogger.com dan silahkan log in dengan akun google kamu

Pilih thema / tema > Edit HTML

Silahkan copy kode CSS dibawah ini, masukan kode CSS dibawah ini sebelum kode ]]></b:skin>  atau sebelum kode </style>

* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { width:300px; left:100px;padding:5px; }
#ajax-search-form { position:relative; font:normal normal 13px; }
#ajax-search-form input { border:1px solid #fff; background-color:white; font:normal normal 12px/100%; color:black; margin:0 0; height:22px; line-height:22px; padding:0 5px; width:330px; }
#ajax-search-form input[type="submit"] { width:auto; background:#fff; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#fff; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:410px; position:absolute; right:6px; top:28px; z-index:99; color:white; border-radius:0 0 3px 3px; box-shadow:0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3); display:none; }
#search-result .close { display:block; position:absolute; top:2px; font-size:20px; right:10px; line-height:normal; color:white; }
#search-result ul { margin:0; overflow:hidden; max-height:405px; border-bottom:1px solid #45A5C2; border-top:1px solid #45A5C2; list-style:none; }
#search-result li { height:68px; overflow:hidden; padding:0 5px; border-top:1px solid #45A5C2; border-bottom:1px solid #45A5C2; position:relative; }
#ajax-search-form a { color:#741F27; text-decoration:none; }
#search-result h4 { display:block; margin:0 0 10px 5px; color:white; }
#search-result p { font-size:10px; color:white; }
#search-result span { width:50px; height:50px; display:block; float:left; padding:2px; margin-right:5px; margin-top:5px; background-color:whitesmoke; }
#search-result img { width:100%; height:100%; display:block; }
#search-result h5 { color:#1E598E; overflow:hidden; font-size:100%; margin-top:2px; height:16px; }
#search-result h5:hover { color:#333; text-decoration:underline; }
}
#search-result mark { color:white; background:#085C0B; padding:0 3px; }
#search-result ul:hover { overflow:auto; }

Langkah selanjutnya letakan kode jQuery dibawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function (x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d)
    },
    easeInQuad: function (x, t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b
    },
    easeInCubic: function (x, t, b, c, d) {
        return c * (t /= d) * t * t + b
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t + 2) + b
    },
    easeInQuart: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t + b
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b
    },
    easeInQuint: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t == 0) {
            return b
        }
        if (t == d) {
            return b + c
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * Math.pow(2, 10 * (t - 1)) + b
        }
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
        }
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
    },
    easeInElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d / 2) == 2) {
            return b + c
        }
        if (!p) {
            p = d * (0.3 * 1.5)
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
        }
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b
        } else {
            if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
            } else {
                if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
                }
            }
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d / 2) {
            return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * 0.5 + b
        }
        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
    }
});
/* Search*/
var searchFormConfig = {
    summaryPost: true,
    resultThumbnail: true,
    fallbackThumb: "http://1.bp.blogspot.com/-41xX9MKBr-w/U1Tt0T8gNRI/AAAAAAAABZw/SocPS0qeq1k/s50-c/Noim.png",
    thumbSize: 50,
    summaryLength: 15
};
(function (c) {
    var a = c("#ajax-search-form"),
        d = a.find(":text");
    config = searchFormConfig;
    a.append('<div id="search-result"></div>');
    var b = c("#search-result");
    a.on("submit", function () {
        var e = d.val();
        b.slideDown(500, "easeOutBounce").html("Loading...");
        c.ajax({
            url: "https://www.asis10.com/feeds/posts/summary?alt=json-in-script&q=" + e + "&max-results=9999",
            type: "get",
            dataType: "jsonp",
            success: function (q) {
                var p = q.feed.entry,
                    m, l, o, n, g = "";
                if (p !== undefined) {
                    g = "<h4>Search results for keyword &quot;" + e + "&quot;</h4>";
                    g += '<a class="close" href="/">&times;</a><ul>';
                    for (var k = 0; k < p.length; k++) {
                        var f = new RegExp(e, "ig"),
                            o = p[k].title.$t.replace(f, "<mark>" + e + "</mark>");
                        for (var h = 0; h < p[k].link.length; h++) {
                            if (p[k].link[h].rel == "alternate") {
                                n = p[k].link[h].href
                            }
                        }
                        if (config.summaryPost === true) {
                            if ("content" in p[k]) {
                                m = p[k].content.$t
                            } else {
                                if ("summary" in p[k]) {
                                    m = p[k].summary.$t
                                } else {
                                    m = ""
                                }
                            }
                        }
                        if (config.resultThumbnail === true) {
                            if ("media$thumbnail" in p[k]) {
                                l = p[k].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c")
                            } else {
                                l = config.fallbackThumb
                            }
                        }
                        m = m.replace(/<\S[^>]*>/g, "");
                        if (m.length > config.summaryLength) {
                            m = m.substring(0, config.summaryLength) + "..."
                        }
                        m = m.replace(f, "<mark>" + e + "</mark>");
                        g += '<li><a href="' + n + '" target="_blank"><span><img src="' + l + '" alt="" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"
                    }
                    g += "</ul>";
                    b.html(g)
                } else {
                    b.html('<a class="close" href="/">&times;</a><strong>No result!</strong>')
                }
            },
            error: function () {
                b.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>')
            }
        });
        return false
    });
    a.on("click", ".close", function () {
        b.slideUp(500, "easeInExpo");
        return false
    })
})(jQuery);
//]]>
</script>

Ganti asis10.com dengan alamat blog kamu

Letakan kode HTML ini terserah kamu, misal diletakan dibagian menu utama atau disamping header

<div id="form-search">
    <form action="/search" id="ajax-search-form">
        <input name="q" type="text" />
        <input type="submit" value="Cr" />
    </form>
</div>

Demikianlah Membuat widget pencarian blog dengan jQuery, silahkan dipraktekan sendiri, semoga bermanfaat
No comments