Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman siz bile aradığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise.
Sizinle paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Forumlardan aşikar olduğunuz bir arama kutusu kutusudur.İçerikleri ister web tarzı ister görsel isterseniz video ve haber tarzında arayınız.



Arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda paneline girdikten sonra Sayfalar> Yeni Sayfa > HTML/JavaScript yolunu izlemek ve aşağıdaki kodları eklemek.

DEMO



<script></script>
<script>
$(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;
$("#Devamı").remove();
if (i.length) {
var o = $("
", {
className: "pageContainer"
});
for (var u = 0; u < i.length; u++) {
o.append(new r(i[u]) + "")
}
if (!t.append) {
s.empty()
}
o.append('
').hide().appendTo(s).fadeIn("slow");
var a = e.responseData.cursor;
if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
$("
", {
id: "Devamı"
}).appendTo(s).click(function () {
n({
append: true,
page: t.page + 1
});
$(this).fadeOut()
})
}
} else {
s.empty();
$("

", {
className: "notFound",
html: "Hiçbir sonuç bulunamadı!"
}).hide().appendTo(s).fadeIn()
}
})
}
function r(e) {
var t = [];
switch (e.GsearchResultClass) {
case "GwebSearch":
t = ['

', '

', e.title, "

", "

", e.content, "

", '', e.visibleUrl, "", "
"];
break;
case "GimageSearch":
t = ['
', '', '', '
', '', e.visibleUrl, "", "
"];
break;
case "GvideoSearch":
t = ['
', '', '', '
', '', e.publisher, "", "
"];
break;
case "GnewsSearch":
t = ['
', '

', e.title, "

", "

", e.content, "

", '', e.publisher, "", "
"];
break
}
this.toString = function () {
return t.join("")
}
}
var e = {
siteURL: "sosyaltus.com",
searchSite: true,
type: "web",
append: false,
perPage: 8,
page: 0
};
var t = $("", {
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");
$("#Devamı").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>












  • Web

  • Görsel

  • Haber

  • Video

Kaynak: Forum Tarzı Arama Kutusu