Cara Membuat Pencarian Seperti Facebook di Blog
Pada Kali ini saya akan membahas tentang bagaimana Cara Membuat Pencarian Blog Otomatis dengan Ajax Jquery. AJAX, singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. Sebuah contoh perintah AJAX bisa berjalan seperti berikut:
1. Silahkan cari kode ]]></b:skin> atau </style> copy kode dibawah ini dan letakkan diatasnya.
2. Setelah itu silahkan cari </body> kemudian letakan kode dibawah ini tepat diatasnya
3. Silahkan ganti warna merah diatas dengan URL blog anda selanjutnya simpan kode dibawah ini yang anda inginkan
4. Selanjutnya simpan, demikian tips dan trik yang dapat saya sampaikan semoga bermanfaat bagi anda semua. terimakasih.
- Client memanggil laman dari server
- Server merespon panggilan dan mengirimkan laman
- Client membuat perintah AJAX ke server dan memanggil lebih banyak data
- Server mengirimkan data tersebut
- Client memutakhirkan laman dengan data tersebut tanpa me-refresh laman.
Facebook, Gmail, dan Pinterest adalah contoh situs-situs yang banyak menggunakan AJAX.
untuk Cara Membuat Pencarian Seperti Facebook di Blog anda bisa mengikuti tutorial berikut ini :
* { box-sizing:border-box; }#search-result * { margin:0 0 0 0; padding:0 0 0 0; }li { display:list-item; }#form-search { width:300px; left:100px;padding:5px; }#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. Setelah itu silahkan cari </body> kemudian letakan kode dibawah ini tepat diatasnya
<script type='text/javascript'>//< }, 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/AVvXsEgBuhwvsnEd_K8kPp3WyAzttDhO9KwGym15Ptu44F4I_Kv34ykaq-vvdfEhmzkzmH3VggRRHpPYB8XrjJSUbyU1UcyaY2XIiWtEzCecseQpY7cCXUUQfL-KaIZyWWw-Z6zjvmycn2m0L8Q/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://www.kliktau.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 "" + e + ""</h4>"; g += '<a class="close" href="/">×</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="/">×</a><strong>No result!</strong>') } }, error: function () { b.html('<a class="close" href="/">×</a><strong>Error loading feed.</strong>') } }); return false }); a.on("click", ".close", function () { b.slideUp(500, "easeInExpo"); return false })})(jQuery);//]]></script>
3. Silahkan ganti warna merah diatas dengan URL blog anda selanjutnya simpan kode dibawah ini yang anda inginkan
<div id="form-search"> <form action="/search" id="ajax-search-form"> <input name="q" type="text" /> <input type="submit" value="Search" /> </form></div>
4. Selanjutnya simpan, demikian tips dan trik yang dapat saya sampaikan semoga bermanfaat bagi anda semua. terimakasih.
Post A Comment:
0 comments so far,add yours