Tips Dan Tips Belajar Seo Blog memang sudah lama ini tidak pernah update postingan, dikarenakan saya sudah males ngeblog yang disebabkan template blog ini sudah terdapat sebagian orang yang mengclonenya.
akan tetapi untuk saat ini saya lagi rendah hati dan ingin membagikan sebuah widget yang lumayan keren untuk dipasang pada blog.
Custom Search Dengan Ajax Jquery
Pasang CSS berikut tepat di atas </style>
#searchForm{background-color:#4C5A65;position:relative;margin:0 0 10px 0;padding:10px;}
fieldset{border:none}
#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}
#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwdsQVDRNA2VoogPJa-apKFSNu2Hz5ao5GDohz2CDv-0sNgAyK2eVzb_CWZNgXDC5zdB9X72rssql95u3kspysHxTqFFpJt0aHJIMSH83WDUB9O2mYxXP0BLcH1lPlAXYyIyFr4hLiKF2/s30/search_icon.png) no-repeat;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;height:34px;line-height:34px;margin-right:12px;outline:medium none;text-shadow:1px 1px 0 #FFF;width:385px;padding:0 0 0 25px}
.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}
.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuM4zGsnEQM7wKFItDH7odiiPSAJLDmMMivrKHMQTh9g2q_yBa6IV1t662m8baV0Gjt7aFImo4DAUA9P2F-TlKGAaV6oXhRIqSn2wzmxVO_bl0Mb6AD5eOiXmeLbJgyvtKiNfAOL1pUk/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}
li.web{width:15px}
li.images{width:22px;background-position:-18px 0}
li.images.active,li.images:hover{background-position:-18px bottom}
li.news{width:14px;background-position:-44px 0}
li.news.active,li.news:hover{background-position:-44px bottom}
li.videos{width:17px;background-position:right 0}
li.videos.active,li.videos:hover{background-position:right bottom}
span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YUGtEL9UAgBhETnAFAJKbrwPwoXu37chRl9CNt_ndNrYPhasa-KCxNCzp6Xvfzt_B1jp3cWPkAVZhw-gLQ9a5qkZwJFDb3CsyNnDOT_DrISDCdnx2gJX16sfkX6e2viMFNmJE4voqlk/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}
#submitButton{background:#52e052;color:#000;width:83px;height:36px;overflow:hidden;text-transform:uppercase;font-weight:bold;border:1px solid #32CD32;outline:1px solid #228B22;cursor:pointer}
#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input[type=radio]{cursor:pointer}
.pageContainer{margin-left: 345px;background: #FAFAFA;margin-bottom:50px;}
p.notFound{text-align:center;padding:0 0 40px}
.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}
.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}
.webResult h2 b{color:#fff}
.webResult h2 a{color:#eee;border:none}
.webResult p{line-height:1.5;padding:15px 20px;color:#222;}
.webResult p b{color:#000}
.webResult > a{margin-left:20px}
.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}
.imageResult img{display:block;border:none}
.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}
#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_ozw47mDBwIGumnD4eNMfUcpzioWz1etJ6kB0g5dpy-gPkC1o4C6DH6HOb8osZBpT-daXx2EfWnMUW4LPDdMT8FEK39uzGPZb46067c-8P04aFgZszzz2b6TByW8VdnLZ0ZtnMhQBtQ/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}
li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}
#page{ margin-left:0; }
setelah itu cari kode </body>
dan tambahkan kode berikut tepat diatasnya.
<script type="text/javascript">
//<![CDATA[
$(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;
$("#more").remove();
if (i.length) {
var o = $("<div>", {
className: "pageContainer"
});
for (var u = 0; u < i.length; u++) {
o.append(new r(i[u]) + "")
}
if (!t.append) {
s.empty()
}
o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");
var a = e.responseData.cursor;
if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
$("<div>", {
id: "more"
}).appendTo(s).click(function () {
n({
append: true,
page: t.page + 1
});
$(this).fadeOut()
})
}
} else {
s.empty();
$("<p>", {
className: "notFound",
html: "No Results Were Found!"
}).hide().appendTo(s).fadeIn()
}
})
}
function r(e) {
var t = [];
switch (e.GsearchResultClass) {
case "GwebSearch":
t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
break;
case "GimageSearch":
t = ['<div class="imageResult">', '<a target="_blank" href="', e.unescapedUrl, '" title="', e.titleNoFormatting, '" class="pic" style="width:', e.tbWidth, "px;height:", e.tbHeight, 'px;">', '<img src="', e.tbUrl, '" width="', e.tbWidth, '" height="', e.tbHeight, '" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
break;
case "GvideoSearch":
t = ['<div class="imageResult">', '<a target="_blank" href="', e.url, '" title="', e.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">', '<img src="', e.tbUrl, '" width="100%" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
break;
case "GnewsSearch":
t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
break
}
this.toString = function () {
return t.join("")
}
}
var e = {
siteURL: "mexicara.blogspot.com",
searchSite: true,
type: "web",
append: false,
perPage: 8,
page: 0
};
var t = $("<span>", {
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");
$("#more").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>
Untuk menempatkan kotak searchnya adakalanya anda harus mengerti kode xhtml pada blog anda, tetapi kalau ingin lebih mudah, silahkan saja pergi ke tata letak dan pilih HTML/JavaScript
dan pasang kode berikut pada formulir yang tersedia.
<div id='page'>
<form id='searchForm' method='post'>
<fieldset>
<input id='s' type='text'/>
<input id='submitButton' type='submit' value='Search'/>
<div id='searchInContainer'>
<input id='searchSite' name='check' type='radio' value='site'/>
<label for='searchSite' id='siteNameLabel'>Search</label>
<input id='searchWeb' name='check' type='radio' value='web'/>
<label for='searchWeb'>Search The Web</label>
</div>
<ul class='icons'>
<li class='web' data-searchType='web' title='Web Search'>Web</li>
<li class='images' data-searchType='images' title='Image Search'>Images</li>
<li class='news' data-searchType='news' title='News Search'>News</li>
<li class='videos' data-searchType='video' title='Video Search'>Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id='resultsDiv'></div>
Simpan Templatemu.
sumber kode: http://tutorialzine.com/2010/09/google-powered-site-search-ajax-jquery/
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini