Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Form Search Blogger Dengan Ajax jQuery

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://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: "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.

Berlangganan artikel via email

29 Response to "Form Search Blogger Dengan Ajax jQuery"

Pertamax sobb..
Baru lihat yang kayak gini. Keren....

Balas

Kedua Premium juga boleh deh Mas Andes..? hhh
Untuk membuat form atau box Search di blog lumayan
Juga kodenya, sedikit banyak juga yah Mas? tapi tampilanya
Bagus, saya baru lihat perlu di coba, ijin simak Mas Andes

Balas

ada pesan begini mas >>HTML Anda tidak bisa diterima: Tag putus: DIV

Balas

kok gak ada demonya mas, biar bisa coba2 lihat.

Balas

kpn2 saya cb mas..

Balas

nggak ngerti sob, nyimak dulu, hehe

Balas

Kode dan hasil yang ditampilkan juga sebanding kok mas

Balas

sepertinya patut untuk dicoba ni mas andes , makasih atas share nya mas ijin uji terlebih dahulu

Balas

Meraktekin caranya persis kayak kita mau buat artikel ya mas.. :)

Wah udah lama ndak numpang ngadem di sini..jd pangling nih mas...hehe :)

Balas

jangan liat banyaknya tapi lihat hasilnya iya kan mas :)

Balas

puasa dulu kang biar HTMLnya lancar dan bisa diterima hehe...

Balas

yang pangling mas Andesnya apa blognya mas hehe...

Meskipun scriptnya panjang tapi hasilnya juga sepadan mas :)

Balas

Ini merupakan hal yang baru mas buat saya mengenai cara membuat form search blogger dengan ajax jquery, membaca penjelasannya kayaknya sangat bermanfaat sekali artikel ini mas, makasih :)

Balas

Jadi ini script di pasang di halaman statis ya mas, yang mana khusus untuk kotak telusur saja? Sepertinya boleh juga nich tutorialnya. Kebtulan blog saya sudah ada widget kotak penelusuran yang dipasang di sidebar dari Google Search Custom (CSE) hehe :D

Balas

50:50 ya mas Bud...related post juga baru lagi jd tambah mantab dah blognya

Balas

kode yang ditampakan di mas andes selalu ajib dan selalu mengerikan ekekekekekekk :D

Balas

Kok ngeri gimana sih mas..emangnya penampakan heheheh

Balas

aku pernah mecoba berapa kali ajax jquery ini...tapi hasilnya nggak bagus-bagus....mudah-mudahan kali ini bisa bagus dech

Balas

aku langsung suka
dan mencoba untuk harus bisa
supaya ga kalah sama adminnya

heehe

Balas

keren mas andes, sekalipun kodenya panjang tapi hasilnya yahoot

Balas

heloooooooooooo mas andes apa kabarnya ?? sudah lama tidak bersua ..
masih seneng otak atik kode"an bgtu trnyata,. ga ada pusingnya ya mas ?
aku aja yang cm baca pusing . wkwkwk

Balas

Salam jumpa kembali Mas... wahh selalu share nih... oh ya.. saya ada lelang keperawanan saya tuh di blog... mampirlah.. kali aja tertarik...

Balas

waduh.. kepanjangan tuh kodinya.. serem mas tapi keren kalau menggunakan Ajax jQuery

Balas

keren sobb saya bookmark dulu ya..

Balas

Panjang banget ya kode nya mas

Balas

wooowwww panjang amat script na jadi liuer kang,,atur nuhun cobian heula ah

Balas

gan kalo ane udh punya kotak search dri template ganggu gan?
tolong bales

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Form Search Blogger Dengan Ajax jQuery" ini bermanfaat, share ke jejaring sosial.
Konversi Kode