Form Search Blogger Dengan Ajax jQuery

Form Search Blogger Dengan Ajax jQuery – ini merupakan cara dimana untuk membangun sebuah form halaman search engine pada halaman web/blog yang nantinya dapat kita custom untuk berbagai keperluan dalam memfasilitasi web/blog tersebut. Form search ini layaknya seperti halaman pencarian google dimana nantinya dapat digunakan untuk mencari baik itu artikel, gambar, news berita maupun video, sehingga bisa disesuaikan untuk berbagai niche web/blog. Jika kita lihat dari cuplikan kode dibawah, pada googleSearch () berfungsi untuk mengirimkan permintaan JSON ke Google API dan menghasilkan markup untuk memasukkan ke resultsDiv. Saat pertama mengakses nanti halaman masih kosong dan ketika melakukan pencarian maka hasil akan di tampilkan dengan 8 post serta tombol More yang terdapat di bagian bawah hasil pencarian untuk meload hasil lebih banyak lagi yang di tampilkan. Untuk penerapannya pada tutorial ini saya taruh kedalam halaman statis blog dan berikut cara memasang Form Search Blogger Dengan Ajax jQuery.

Setelah masuk pada halaman dashboard blogger langsung saja menuju ke page statis yang terdapat pada menu Laman Baru dan tambahkan Laman Kosong. Pada halaman entri gunakan mode HTML untuk memasukan kode berikut ini.

<style type='text/css'>
#searchForm{background-color:#4C5A65;position:relative;margin:0 0 80px 0;padding:10px;}
fieldset{border:none}
#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}
#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmm5MfDBUj04lMP4hZDrg1iOZyy7t27Oe9Yol2s2hm3C_9QrLB_thzHOfr7Y8PVvkA6Q4u3fVJKkLXh38vXUxg3bvQMmhtmlVbwFnEsskMZ-5QOkP6QqKuMOg3XsTDlnJ0l6ufS8nea3o/s30/search_icon.png) no-repeat;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;height:34px;line-height:34px;margin-right:12px;outline:medium none;text-shadow:1px 1px 0 #FFF;width:385px;padding:0 0 0 25px}
.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}
.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3luWVRSurbj-uTLRvhGQthfxMRRLkiET4gg967S4U1ciYbauIO3dfquRXm_H9MWLzlA0BQ9zYnxq0HMO07PNbC_3DkU1_c1OlFMhi-wLV62sF-6NEBhfw7TAvB4o6AImQMhmV64ehMgk/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}
li.web{width:15px}
li.images{width:22px;background-position:-18px 0}
li.images.active,li.images:hover{background-position:-18px bottom}
li.news{width:14px;background-position:-44px 0}
li.news.active,li.news:hover{background-position:-44px bottom}
li.videos{width:17px;background-position:right 0}
li.videos.active,li.videos:hover{background-position:right bottom}
span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BTpQH87IY8tM7kUhADS4hRU117aKahNbItAJ2-O7z6kYnWGrWf9M5DiA1jIBMNGaH1_qW08_ctpq6KeN4oAxPpR0KDOw_nXcCKciaiu-MmYTGjIJUZQh1JpndeyRjKUHyzarQFkOxMo/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}
#submitButton{background:#52e052;color:#000;width:83px;height:36px;overflow:hidden;text-transform:uppercase;font-weight:bold;border:1px solid #32CD32;outline:1px solid #228B22;cursor:pointer}
#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input[type=radio]{cursor:pointer}
.pageContainer{margin-bottom:50px;}
p.notFound{text-align:center;padding:0 0 40px}
.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}
.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}
.webResult h2 b{color:#fff}
.webResult h2 a{color:#eee;border:none}
.webResult p{line-height:1.5;padding:15px 20px;color:#222;}
.webResult p b{color:#000}
.webResult > a{margin-left:20px}
.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}
.imageResult img{display:block;border:none}
.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}
#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjal54Zq7YewcAoTdtYRqlZk-0JQ28gGuQYjJoofJUtyZcm9TTBy1ORJ1cYJTaVYZzCKftci7Vpi_EC7SdxBdP0jR-vkn4MSxKcB2HvKK58D0uZQYb0zjf-_dAVcLyuSkZv1173iCxuiKw/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}
li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}
#page{ margin:0 auto; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    function n(t) {
        t = $.extend({}, e, t);
        t.term = t.term || $("#s").val();
        if (t.searchSite) {
            t.term = "site:" + t.siteURL + " " + t.term
        }
        var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";
        var s = $("#resultsDiv");
        $.getJSON(i, {
            q: t.term,
            rsz: t.perPage,
            start: t.page * t.perPage
        }, function (e) {
            var i = e.responseData.results;
            $("#more").remove();
            if (i.length) {
                var o = $("<div>", {
                    className: "pageContainer"
                });
                for (var u = 0; u < i.length; u++) {
                    o.append(new r(i[u]) + "")
                }
                if (!t.append) {
                    s.empty()
                }
                o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");
                var a = e.responseData.cursor;
                if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
                    $("<div>", {
                        id: "more"
                    }).appendTo(s).click(function () {
                        n({
                            append: true,
                            page: t.page + 1
                        });
                        $(this).fadeOut()
                    })
                }
            } else {
                s.empty();
                $("<p>", {
                    className: "notFound",
                    html: "No Results Were Found!"
                }).hide().appendTo(s).fadeIn()
            }
        })
    }
    function r(e) {
        var t = [];
        switch (e.GsearchResultClass) {
        case "GwebSearch":
            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
            break;
        case "GimageSearch":
            t = ['<div class="imageResult">', '<a target="_blank" href="', e.unescapedUrl, '" title="', e.titleNoFormatting, '" class="pic" style="width:', e.tbWidth, "px;height:", e.tbHeight, 'px;">', '<img src="', e.tbUrl, '" width="', e.tbWidth, '" height="', e.tbHeight, '" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
            break;
        case "GvideoSearch":
            t = ['<div class="imageResult">', '<a target="_blank" href="', e.url, '" title="', e.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">', '<img src="', e.tbUrl, '" width="100%" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
            break;
        case "GnewsSearch":
            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
            break
        }
        this.toString = function () {
            return t.join("")
        }
    }
    var e = {
        siteURL: "mas-andes.blogspot.com",
        searchSite: true,
        type: "web",
        append: false,
        perPage: 8,
        page: 0
    };
    var t = $("<span>", {
        className: "arrow"
    }).appendTo("ul.icons");
    $("ul.icons li").click(function () {
        var n = $(this);
        if (n.hasClass("active")) {
            return false
        }
        n.siblings().removeClass("active");
        n.addClass("active");
        t.stop().animate({
            left: n.position().left,
            marginLeft: n.width() / 2 - 4
        });
        e.type = n.attr("data-searchType");
        $("#more").fadeOut()
    });
    $("#siteNameLabel").append(" " + e.siteURL);
    $("#searchSite").click();
    $("li.web").click();
    $("#s").focus();
    $("#searchForm").submit(function () {
        n();
        return false
    });
    $("#searchSite,#searchWeb").change(function () {
        e.searchSite = this.id == "searchSite"
    })
})
</script>
<div id="page">
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>

Ganti mas-andes.blogspot.com dengan URL blog anda.

Setelah selesai custom bisa langsung di publish. Untuk mengkustom tampilannya bisa di sesuaikan sendiri pada kode CSSnya dengan melakukan beberapa perubahan yang kiranya bisa sebagus mungkin.