Tutorial Blogger - Ajax Search Box ~ MESTI GIMANA

Assalamualaikum kerabat. Search Box dengan Fungsi Ajax adalah salah satu style yang bisa kamu tambahkan untuk mempercantik blog kamu. Tentu, selain memperbaiki kualitas konten, bukankah keinginan kita adalah memperindah tampilan blog? Jika iya, maka ajax search box adalah salah satu yang bisa kamu terapkan pada blog. Tertarik untuk menerapkannya di blog kamu? Ikuti langkah-langkah di bawah ini.

Sebelum memulai pengeditan, baca bismillah terlebih dulu. Jangan lupa juga backup template blog.

1. Buka dashboard blogger, kemudian pilih "Tata Letak"

2. Copy kode di bawah ini.

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

3. Klik "Tambahkan Gadget". Pilih "HTML/Java Script" Untuk penempatan silahkan sesuaikan dengan selera. Paste kode yang sudah di copy di atas ke dalam "HTML/Java Script". Kemudian simpan.

4. Next, buka "Template"

5. Cari "</body>" Untuk mempercepat pencarian gunakan "CTRL+F". Paste kode dibawah ini di atas </body>.

<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/AVvXsEiZdO7pNPlC-ggVTjzkvD3OJsns8UWskEqvO07vWFco2ni7D8lQ3XymPQsFY7z2WX7WNIr-7nrZflZGhMA7VsjAqRfJhcsDzzyvG00KdqTpgeqz5h2laQaogDLScPGc4wyg1I6HDk_CQ8g/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://mestinyagimanaa.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>

Lihat gambar di bawah ini untuk lebih jelasnya.

Note: ganti kode berwarna kuning dengan url blog kamu

6. Now, cari "]]></b:skin>" dan paste kode di bawah ini tepat di atasnya.

* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search {background-color:#2e3639; width:290px;left:100px;padding:4px 10px;margin:10px;margin-left:0px; }
#ajax-search-form { position:relative; font:normal normal 13px Arial,Sans-Serif; }
#ajax-search-form input { border:3px solid #e3e3e3; background-color:white; font:normal normal 15px/100% Arial,Sans-Serif; color:black; margin:0 0; height:35px; line-height:30px; padding:0 5px; width:235px; }
#ajax-search-form input[type="submit"] {width:auto; height:35px;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; left:-9px; 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; }

Seperti gambar di bawah ini.

7. Simpan template dan selesai. Buka blog dan lihat hasilnya.
Baca juga: Cara Pasang Iklan di Bawah Judul Postingan ALA ANTI MAINSTREAM

Demikian Tutorial blogger kal ini. Nantikan tutorial-tutorial lainnya. Semoga bermanfaat, wassalam.

Enjoy and Share

MESTI GIMANA

Tutorial Blogger - Ajax Search Box

Related Post

About Mesti Gimana