Kotak Pencarian Cepat untuk Blogger dengan Ajax JQuery

Membuat Kotak Pencarian Blogger dengan Ajax JQuery

Sebuah pencarian cepat untuk blogspot ini akan mempercepat pencarian tanpa harus loading lagi menuju halaman search result, karena hasil penelusuran akan langsung tampil dibawahnya..



Pemasangannya pada Blogspot



Kotak pencarian ini akan bekerja jika blog anda sudah dilengkapi dengan JQuery.

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/AVvXsEjyzfj-HTndLX97oIqUFGEePjCjtguqZ7P_0u9jeOEDAfbVHcViPwtfOhuFQX3Um0uOQI1YoXlWTWNS9Xv1abougzak3WQRM_RmCQPGdp1-U3gN9aMNuqFbL05fGwTuwK_u8lnSvQsbvog/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://nama_blog_anda.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 alamat_blog_anda yang saya beri mark denagn Alamat Blog anda
5. Apabila hasil penelusuran tidak ingin terbuka di tab baru, silahkan cari kode <a href="' + n + '" target="_blank"> dan hapus kode target="_blank"
6. Simpan Template

11 Responses to "Kotak Pencarian Cepat untuk Blogger dengan Ajax JQuery"

  1. Wihh , izin nyoba gan .
    kali aja bisa

    ReplyDelete
  2. Oh jadi ini to caranya jadi baru tahu...
    Ijin aq simpan dulu nie....

    ReplyDelete
  3. nice share gan :-bd ,.. baik untuk memanjakan pengunjung ni.. kodenya juga langsung, gk hostingan yang kesannya beli kucing dalam karung gitu.. hehehe B)

    ReplyDelete
  4. Mantep kodenya gan,buat memanjakan visitor dalam pencarian konten..

    ReplyDelete
  5. saya udah cobain search box itu gan memang memudahkan visitor karena di lengkapi gambar

    ReplyDelete
  6. wah, dengan ini pengunjung blog kita juga lebih mudah...
    mantap mas (y)

    ReplyDelete
  7. ^:D Izin Saya Terapkan Di blog.... Hehe, Makasih Sob Udah Share.... :)

    ReplyDelete
  8. pas banget, biar pencarianya secepat google dan ketika koneksi internetnya cepat

    ReplyDelete
  9. Ijin dimasukin ke Blog ane. Kali aja berhasil. Sering gagal gan :p :D

    ReplyDelete
  10. keren nih biar ga usah load lagi :D makasih gan, saya coba pasang dulu diblog saya :D

    ReplyDelete