Mecha versi 2.6.4 sudah dirilis!

Kotak Penelusuran Blogger dengan AJAX jQuery

Tabel Konten
  1. HTML Formulir 
  2. jQuery 
  • Cara Kerja 
  • Integrasi Widget ke Blogger 
    • Ajax Search Form with jQuery
    Kotak Penelusuran Blogger dengan Ajax jQuery

    Beberapa waktu yang lalu Saya pernah menuliskan cara menampilkan hasil penelusuran dengan JSON Blogger tanpa harus berpindah dari halaman awal menuju halaman hasil penelusuran dengan JavaScript (Anda bisa membacanya di sini).

    Melalui jQuery $.ajax() kita bisa meniadakan penyisipan script callback dan langsung memanggil JSON dengan cara seperti ini:

    $('#search-form').on("submit", function() {
    $.ajax({
        url: '/feeds/posts/summary?alt=json-in-script&q=KATA_KUNCI',
        type: 'get',
        dataType: 'jsonp',
        success: function(json) {
            …
        }
    });
});

    Sehingga jika dijabarkan akan menjadi seperti ini:

    HTML Formulir 

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

    jQuery 

    (function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (typeof entry !== "undefined") {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);

    Lihat Demo

    Cara Kerja 

    Pertama-tama kita tangkap beberapa elemen penting yaitu formulir pencarian dan elemen input kata kunci pencarian:

    var $form = $('#ajax-search-form'), // Mendapatkan elemen formulir
    $input = $form.find(':text'); // Mendapatkan elemen input bertipe teks (penampung kata kunci pencarian)

    Sisipkan sebuah elemen HTML secara tidak langsung sebagai kontainer hasil pencaran:

    $form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');

    Setelah itu kita berlakukan event .submit() atau .on("submit") pada formulir untuk kemudian kita bisa langsung memproses data JSON yang akan ditransfer pada saat yang bersamaan ketika kita menekan tombol Enter pada papan ketik atau mengeklik tombol penelusuran di dalam formulir:

    $form.on("submit", function() {
    $.ajax(url, type, dataType, success, error); // Dapatkan data dan proses data di sini...
    return false; // <= Ini digunakan untuk mencegah formulir membawa kita menuju halaman hasil penelusuran saat kita men-submit kata kunci pencarian
});

    Pengambilan data JSON dilakukan oleh jQuery $.ajax(), sehingga kita tidak perlu menyisipkan skrip callback ke dalam area <head> seperti dalam metode JavaScript mentah pada umumnya:

    $.ajax({
    url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
    type: 'get',
    dataType: 'jsonp',
    success: function(json) {
        var entry = json.feed.entry,
            link, skeleton = "";
        if (typeof entry !== "undefined") {
            skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
            skeleton += '<a class="close" href="/">&times;</a><ol>';
            for (var i = 0; i < entry.length; i++) {
                for (var j = 0; j < entry[i].link.length; j++) {
                    if (entry[i].link[j].rel == "alternate") {
                        link = entry[i].link[j].href;
                    }
                }
                skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
            }
            skeleton += '</ol>';
            $result_container.html(skeleton);
        } else {
            $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
        }
    },
    error: function() {
        $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
    }
});

    keyword adalah variabel. Nilainya diambil dari elemen input teks:

    var keyword = $input.val();
// `/feeds/posts/summary?alt=json-in-script&q=keyword&max-results=9999`

    Integrasi Widget ke Blogger 

    Widget ini hanya akan bekerja jika blog Anda sudah dilengkapi dengan jQuery.

    Pertama-tama masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

    <style scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Helmet,FreeSans,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
  <input type="text" name="q"/>
  <input type="submit" value="Search"/>
</form>
<script>
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted…
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list…
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (typeof entry !== "undefined") {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty … (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

    Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan Widget.

    Lihat Demo Lihat Demo: Dengan Navigasi

    66 Komentar

    Unknown

    simple n cool :-bd

    Unknown

    keren dan waaaaaaaaaaaaaw x@

    Rosyd Aqbar

    wah, ini ringan mas, tapi apakah kita bisa mengedit hasil dari Searchnya ?
    misal kita mau memberi warna pada Kata kunci seperti fungsi Find pada browser gitu :D

    Taufik Nurrohman

    Pakai RegExp(), lalu ubah karakter judulnya:

    var mark = new RegExp(keyword, "ig");
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t.replace(mark, "<span style=\'background-color:pink;text-decoration:underline;\'>" + keyword + "</span>") + '</a></li>';

    Demo: http://jsfiddle.net/tovic/N8H7W/

    Rosyd Aqbar

    sip deh mas, apakah Search tools ini sama seperti punyanya mas tofik ?
    kalo iya, kok ada sebuah fungsi di URLnya mas ?
    contoh saya mau Search "jquery"
    di akhir URL ada tambahan ...?q=jquery sebenernya saya pengin yang kaya gitu, tapi saya coba yang ini dulu deh :-bd

    Beben Koben

    kalo urusan search mencari sudah enak dah pakek jQuery AJAX API, KOMPLIT.
    undercover-blogger.blogspot.com/2012/10/google-web-search-api.html
    tinggal add di add gadget blogger :D

    di judul aja nih, enggak sekalian di adain headline artikelnya!

    good good good :-bd

    Surga Kenari

    mas Taufik,

    saya menggunakan search bawaan dari widget google.

    ketika saya search mengapa 'isinya' poisisinya bisa di atas banget ya?

    butuh pencerahan mas..

    Taufik Nurrohman

    #CustomSearch1 .widget-content {margin-top:15px}
#CustomSearch1_form {position:relative}

    Surga Kenari

    masih ga effect mas.. bisa di cek lagi http://sdftyujklvbn.blogspot.com

    Unknown

    gimana cara menerapkannya pada navigasi?

    Unknown

    Mantap sob, thank infonya telah berbagi share

    Unknown

    permisi,ijin pakai bbrp kode nya. mksh

    Unknown

    kode untuk tombol close yang mana mas mohon pencerahannya

    Adi

    kalau pengen ganti icon searchnya gimana mas?
    tolong pencerahanya icon search yg warna biru di atas kurang keren

    Taufik Nurrohman

    Ganti <input type="submit" value="Search" /> menjadi:

    <input type="image" src="URL-gambar.jpg" />

    Unknown

    Kalau di terapkan di Menu Navigasi Gimana ?

    Anonim

    wah, keren tutorialnya mas, izin coba ya :)

    Unknown

    Di blog saya kok hasil penelusurannya pindah ke halaman lain ? Tolong di Cek http://aldhinya.blogspot.com/. thanks..

    Admin

    apakah alamat blognya sudah di ubah?

    Unknown

    Sudah..

    Admin

    apakah blog anda sudah terpasang jquery?

    Unknown

    Sudah.. saya sudah mengikuti semua cara di atas, anehnya di blog saya hasil penelusurannya masih tetep pindah ke halaman baru..

    Taufik Nurrohman

    Kode JavaScript ini tidak berada di dalam event DOM Ready, jadi harus diletakkan setelah formulir penelusuran, misalnya di atas </body>

    Atau bisa juga dengan cara mengubah bagian ini:

    (function($) {
...
})(jQuery);

    menjadi seperti ini, jika ingin tetap meletakkan kode JavaScript di dalam <head></head>:

    (function($) {
$(document).ready(function() {
...
});
})(jQuery);

    Unknown

    Terima Kasih atas bantuannya, sekarang sudah Bisa... \o/ :-bd :D

    Unknown

    Kalau Modifikasi Search Resultnya jadi kayak begini gimana ya ?

    Anonim

    hi, kalau saya hendak menggunakan feed selain daripada blogger boleh ke?

    sample -
    url: 'http://www.rssmix.com/u/3828765/rss.xml?alt=json-in-script&q=' + keyword + '&max-results=9999',

    bisa gak? saya sudah cuba di jsfiddle, tapi ada masalah. ada solusinya gak?

    Taufik Nurrohman

    Kalaupun bisa, mungkin format data, dukungan dan logika parameter URL serta penamaan key di dalam JSON mereka akan berbeda. Harus dibuat fungsi yang baru lagi. Untuk mengetahui apakah JSON bisa dijadikan widget atau tidak bisa dicoba dengan cara mengakses URL tersebut pada adress bar atau membaca dokumentasi tentang layanan tersebut.

    Saya tidak tahu soal layanan ini, tapi untuk mengakses file dengan format JSON, gunakan ekstensi .json yang (ternyata) tersedia ⇒ http://www.rssmix.com/u/3828765/rss.json

    Coba bandingkan dengan ini ⇒ http://dte-feed.blogspot.com/feeds/posts/default?alt=json

    you

    Mas, saya sudah coba tahap demi tahap tapi hasilnya ketika melakukan pencarian itu Error loading page.. Apa artinya itu kata kunci tidak ditemukan ato ada kelalaian dari saya.?

    you

    maksudnya Error loading feed

    Anonim

    sudah berhasil mas tapi saya kesulitan untuk menambahkan summary dan thumbnailnya... akan saya coba terus tpi kalau gagal mhon bantuannya mas..

    Taufik Nurrohman

    <style scoped="scoped">
#ajax-search-form {
position:relative;
font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form input {
border:1px solid #ccc;
border-top-color:#999;
background-color:white;
font:inherit;
color:black;
margin:0 0;
padding:5px 5px;
width:180px;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form input[type="submit"] {
width:auto;
background-color:#084670;
border-color:transparent;
color:#B4D8F0;
font-weight:bold;
cursor:pointer;
padding-left:7px;
padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
border:1px solid #bbb;
background-color:white;
padding:10px 15px;
margin:2px 0;
width:auto;
height:auto;
max-width:400px;
position:absolute;
top:100%;
left:0;
z-index:99;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4,
#search-result strong {
display:block;
margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 0}
#search-result ol a {font-weight:bold}
#search-result ol a:hover {text-decoration:underline}
#search-result li {
overflow:hidden;
list-style:none;
margin-top:10px;
}
#search-result .close {
display:block;
position:absolute;
top:6px;
right:10px;
line-height:normal;
color:#17950F;
}
#search-result strong {color:#B75252}
#search-result img {
float:left;
margin:2px 10px 5px 0;
padding:2px;
border:1px solid #ccc;
}
</style>

    Taufik Nurrohman

    <form action="/search" id="ajax-search-form">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
<script>
(function($) {
    var $form = $('#ajax-search-form'),
$input = $form.find(':text');
    // Append a search result container to the search form
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');
    // When the keyword is submitted...
$form.on("submit", function() {
    // Get the input value
var keyword = $input.val();
    // Show the search result container and insert a `Loading...` text
$result_container.show().html('Loading...');
    // Get the blog JSON via $.ajax() to show the search result
// The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
$.ajax({
url: 'http://latitudu.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
    // If success, grab the search result list...
success: function(json) {
var entry = json.feed.entry,
link, summary, thumbnail, skeleton = "";
if (entry !== undefined) {
skeleton = '<h4>Search results for keyword &#8220;' + keyword + '&#8221;</h4>';
skeleton += '<a class="close" href="/">&times;</a><ol>';
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
summary = summary.length > 100 ? summary.substring(0, 100) + '&hellip;' : summary;
skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
}
skeleton += '</ol>';
$result_container.html(skeleton);
} else {
// If the JSON is empty ... (entry === undefined)
// Show the `not found` or `no result` message
$result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
}
},
error: function() {
    // If error, show an error message
$result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
}
});
return false;
});
    // Fade out the search result container if the close button is clicked
$form.on("click", ".close", function() {
$result_container.fadeOut();
return false;
});
    })(jQuery);
</script>

    you

    Apakah untuk menempatkan hasil penelusuran di elemen tertentu diperlukan pemanggilan dengan menambahkan getElementById

    Taufik Nurrohman

    Coba ganti nilai variabel $result_container menjadi seperti ini dan lihat sendiri hasilnya:

    var $result_container = $('#Blog1');

    you

    makasih mas... ternyata simple ya.. kalo kita tahu dan faham JS.. kalo boleh tahu refferensi belajar JS didapat dari mana mas... seperti buku apa ato gmn?

    Taufik Nurrohman

    Baguslah kalau sudah paham sama logikanya. Sering-sering praktek saja.

    Unknown

    Lebih sulit dari try out matematika dan ipa nih mas ~x(

    Unknown

    Cara membuat Search Result di statik page gimana boss

    Taufik Nurrohman

    ⇒ https://www.google.com/search?q=memasang+google+cse+di+blogspot

    Unknown

    makasih kang , saya sudah berhasil \o/

    Unknown

    Maaf mas taufik ternyata sudah bisa hehe
    keburu nyerah tadinya ... makasih mas

    budkalon

    Kang, saya udah nyoba ngebagi hasil pencarian ke dalam beberapa halaman, tapi saya gagal terus dalam ngebuat fungsi next() sama prev()-nya. Udah ngulik soal start-index sama max-result, tapi gagal terus. Kira-kira script buat fungsi next() sama prev()-nya gimana, ya?
    Mohon bantuannya, Kang 0:)

    Anonim

    Keren gan, tapi ga jalan kalo pasang langsung di template

    Unknown

    pak, kalau di form search-nya dikasih option mencari di blog atau mencari di google cse, nambahi sekripnya bagaimana? *kliyeng2 :p

    Taufik Nurrohman

    Saya kasi tahu dasarnya saja ya:

    <form action="/search" method="get" onsubmit="window.open(this.r.value + '?q=' + encodeURIComponent(this.q.value));return false;" target="_blank">
<p>
<input name="q" type="text"/>
<button type="submit">Cari</button>
</p>
<p>
<label>
<input name="r" type="radio" value="/search" checked="checked"/> cari di blog
</label>
<label><input name="r" type="radio" value="https://www.google.com/search"/> cari di google</label>
</p>
</form>

    Demo: http://output.jsbin.com/zagafilowi

    Unknown

    kalo dibikin seperti ini, pasti selalu keluar layout..
    #ajax-search-form input { width:100%}

    Addict Covers

    Hii, i love this script, tell me something, its possible to add more then one source for research, like two blogger feeds?

    Taufik Nurrohman

    Add this snippet just before the $.ajax({ line:

    $.ajax({
url: 'http://nama_blog_2.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
    // If success, grab the search result list…
success: function(json) {
var entry = json.feed.entry,
link, skeleton = "";
if (typeof entry !== "undefined") {
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
$result_container.append(skeleton);
}
}
});

    Addict Covers

    thank you for the reply! it's amazing!
    If i may, i'm using the version with thumbnails that you kindly released a few comments up and i'm using this to show thumbnails:

    $.ajax({
    url: 'https://www.blogname.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
    type: 'get',
    dataType: 'jsonp',

    // If success, grab the search result list…
    success: function(json) {
    var entry = json.feed.entry,
    link, summary, thumbnail, skeleton = "";
    if (entry !== undefined) {
    for (var i = 0; i < entry.length; i++) {
    for (var j = 0; j < entry[i].link.length; j++) {
    if (entry[i].link[j].rel == "alternate") {
    link = entry[i].link[j].href;
    }
    }
    thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(//s[0-9]+-c/, "/s500") + '" width="100%" height="auto"!important>' : "";
    summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
    summary = summary.length > 0 ? summary.substring(0, 0) + '&hellip;' : summary;
    skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
    }
    skeleton += '</ol>';
    $result_container.append(skeleton);
    }
    }
    });
    it's working fine, but even with the returning the results properly the "No Result" message still showing

    Addict Covers

    $.ajax({
url: 'https://www.blogname.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
    // If success, grab the search result list…
success: function(json) {
var entry = json.feed.entry,
link, summary, thumbnail, skeleton = "";
if (entry !== undefined) {
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(//s[0-9]+-c/, "/s500") + '" width="100%" height="auto"!important>' : "";
summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
summary = summary.length > 0 ? summary.substring(0, 0) + '&hellip;' : summary;
skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
}
skeleton += '</ol>';
$result_container.append(skeleton);
}
}
});

    Addict Covers

    and i forgot, i wish open the links in the result in another page, like blank stuff, if you help with this thing i'll be appreciated, sorry for bothering

    Komentar telah ditutup.