Form Search Blogger With Ajax jQuery - Setelah di post sebelumnya saya membahas Blogger Quick Search Result With JSON kali ini saya akan membahas mengenai Form Search Blogger With Ajax jQuery yang tentunya lebih keren dari sebelumnya.




Coba lihat demonya dengan menekan tombol diatas. Tertarik? Ikuti tutorialnya disini :)

1. Buatlah halaman baru
2. Pilih mode HTML
3. Pastekan kode berikut kedalamnya!

<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://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/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://lh3.googleusercontent.com/-Xyccrz3MDwo/UnYglQqX6AI/AAAAAAAAGfw/Z3_0cOfYbxk/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://lh3.googleusercontent.com/-ovQis5wQTjo/UnZSOGoMFoI/AAAAAAAAGgY/goZf43qJt9I/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://lh5.googleusercontent.com/-PWsuTfYPHcM/UnYgmFta2GI/AAAAAAAAGgA/hqKmYpcb-Ow/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: "newbanie.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>

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. Selamat mencoba :)