Tutorial Menciptakan Search Form Dengan Ajax Jquery Pada Blog

Tutorial Membuat Search Form dengan Ajax Jquery pada Blog, Jago tutorial akan menyebarkan gosip bagaimana cara nya menciptakan sebuag widget search form pencarian dengan cepat pada blog. Tutorial menciptakan Search Form memakai Ajax Jquery memang sangat elok dan gampang untuk di praktekan di dalam blog anda.

Kotak Pencarian memang sangat berfungsi sekali untuk memudahkan pengunjung blog kita dalam melaksanakan sebuah pencarian terhadapa artikel, data, tulisan, nama dan apa saja yang berkaitan dengan isi dari sebuah blog. Contoh nya pengunjung blog anda ingin mencari artikel perihal "Tutorial Smartphone" di blog kalian, maka si pengunjung blog hanya tinggal mengetik di kotak pencarian yang sudah di sediakan oleh anda dan pribadi enter atau klik pada cursor mouse.

Fitur dari Search Box ini memang cepat sekali dalam proses pencarian tanpa harus loading/direct ke halaman search result, alasannya hasil penulusurannya akan pribadi tampil dibawah widget search box nya. Jika ingin liat demo silahkan lihat kota pencarian di blog saya hampir sama cuma beda warna dengan yang tutorial di bawah ini.

Tutorial Membuat Search Form dengan Ajax Jquery pada Blog

1. Buka Blogger.com dan masukan akun blog agan
2. Pilih Menu Template dan Klik Edit HTML
3. Cari isyarat ]]></b:skin> dengan tekan di keyboard ctrl+f  dan lettakan isyarat css di bawah ini sempurna di atas isyarat ]]></b:skin>

* { 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; }

4. Selanjutnya cari isyarat </body> lalu anda copy isyarat di bawah ini dan lettakan sempurna di atasnya

<script type='text/javascript'> //<![CDATA[ jQuery.easing.jswing = jQuery.easing.swing; jQuery.extend(jQuery.easing, {     def: "easeOutQuad",     swing: function (x, t, b, c, d) {         return jQuery.easing[jQuery.easing.def](x, t, b, c, d)     },     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/AVvXsEgxxXiZf0xLVxum-t8O-580GSitbVj3bTq4YMnzUZ3fMrCeFbpyyBsjPN2IxROFEAcI3XgblP7Dto7GbnliQ8W6CnOYVQ9Bt9ehJUrwkJ_fN9Ugws_eciTjNbFHhHkF_nVCBvU_lCdM-ik/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: "https://masternyatutorialku.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 &quot;" + e + "&quot;</h4>";                     g += '<a class="close" href="/">&times;</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="Tutorial Membuat Search Form dengan Ajax Jquery pada Blog Tutorial Membuat Search Form dengan Ajax Jquery pada Blog" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"                     }                     g += "</ul>";                     b.html(g)                 } else {                     b.html('<a class="close" href="/">&times;</a><strong>No result!</strong>')                 }             },             error: function () {                 b.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>')             }         });         return false     });     a.on("click", ".close", function () {         b.slideUp(500, "easeInExpo");         return false     }) })(jQuery); //]]> </script>

Catatan : ganti isyarat berwarna biru di atas dengan url atau alamat blog anda.
5. Silahkan anda salin isyarat di bawah ini dan letakan sesuai harapan anda, biasanya di taruh di samping sajian navigasi atau di sidebar.

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

6. Simpan Template/Save Template. selesai

Maka anda sudah mendapat kotak pencarian yang sangat keren dan elegant alasannya fitur yang sangat cepat mencari data tanpa harus direct ke halam search result. Semoga anda menyukainya dan biar artikel yang saya berika ini bermanfaat.

Share this post