Cara Membuat Search Form dengan Ajax Jquery di Blog

Ok sobat pada kesempatan ini saya akan membagikan widget blog yaitu search form atau kotak pencarian blog. Cara Membuat Search Form dengan Ajax Jquery ini mudah saja asalakan sobat mengikuti tutorialnya dengan baik.

Search Box berfungsi untuk memudahkan pengunjung blog dalam melakukan pencarian terhadap sebuah data, artikel, tulisan, nama, dan apa saja yang terkait dengan isi dari sebuah blog. Misalkan pengunjung anda ingin mencari tentang template di blog ini, maka sahabat tinggal ketik di kotak tersebut dan langsung klik atau enter.

Sebuah pencarian cepat untuk blogspot ini akan mempercepat pencarian tanpa harus loading lagi menuju halaman search result, karena hasil penelusuran akan langsung tampil dibawah widget searchnya. Contoh search form dengan Ajax Jquery adalah seperti di template yang saya gunakan saat ini.

Cara Membuat:

1. Masuk Editor Template, cari kode  ]]></b:skin> atau </style> copy kode dibawah ini dan letakkan diatasnya.

* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { position:absolute; width:200px; left:200px; top:4px; }
#ajax-search-form { position:relative; font:normal normal 13px Arial,Sans-Serif; }
#ajax-search-form input { border:1px solid #e3e3e3; background-color:white; font:normal normal 12px/100% Arial,Sans-Serif; color:black; margin:0 0; height:22px; line-height:22px; padding:0 5px; width:140px; }
#ajax-search-form input[type="submit"] { width:auto; background-color:#49afcd; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#49afcd; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:710px; 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; }

2. Cari kode </body> kemudian salin kode dibawah ini dan letakkan diatasnya.

<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: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6WHafhnVt3GkGurqPwox8bgk0oeiu0C4WjCx1_LkeIWCaIxLzdMCdVK1XIRxOw_wMxlyRFwaNHBoK61KiMW0-jR0n9YQqBtPQdS-xvZ33cObwP5nowjwc0rjT7vDiXw28sxBu1dBqto/s50-c/Noim.png",
    thumbSize: 50,
    summaryLength: 100
};
(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: "http://namabloganda.blogspot.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>

3. Silahkan salin kode dibawah ini dan letakkan dimana anda ingin meletakkan Kotak Pencariannya, biasanya didalam menu navigasi bagian samping

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

4. Silahkan ganti kode berwarna merah diatas dengan Alamat Blog anda.

5. Simpan Template.

Kotak pencarian atau Search Box juga berfungsi untuk mempercantik tampilan blog anda. Kita sering memperhatikan dan melihat blog-blog yang kita kunjungi, biasanya pemilik web atau blog tersebut pasti menyediakan fungsi ini. Sehingga disamping fungsinya untuk pencarian atas sebuah data atau kata, dia juga berfungsi untuk keindahan blog kita.

 

sumber : http://seocips.com