Membuat Pencarian Google ajax Integration

GAD

Google Apis

Selamat pagi sahabat,  Terkadang saat kitaCara mengatasi Install DotNet 3.5 Windows 8. Read more ... » membuka situs raksasa googleTrik Aman Berinternet I. Read more ... » kita akan dimanjakan denganCara mengatasi Install DotNet 3.5 Windows 8. Read more ... » pencarian auto complete dan one response, nah dari permasalahan itu sayaCara Mudah Compilasi File Java. Read more ... » akan mencoba sharing bagaimana membuat google ajax Integration di webkita sendiri.
Langsung saja yangPengumuman Calon Asisten Praktikum Basisdata. Read more ... » kita 3 file yakni, JqueryBelajar JQuery I. Read more ... »-1.2.6.min.js, index.phpMembuat deteksi Browser dengan PHP. Read more ... » dan CSSDAFTAR MAHASISWA PERBAIKAN DESAIN WEB. Read more ... ». Ketikan source berikut dan simpan dengan nama index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>AJAX and Google Integrated Search</title>
<meta name="robots" content="noindex, nofollow" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAATWDrQjSpZQgTLlfJq0ao0xThi-QzHf7yiYrxl4kzT0KKVn2l1RSjeaaf1Lsfgpf5nR1cvL99ZzkTGg" type="text/javascript"></script><meta name="keywords" content="burhanudin, 1n53ct4, search engine 1n53ct4, membuat ajax google, search engine ajax integration, membuat google search
" />
<link rel="SHORTCUT ICON" href="http://search.burhanudin.web.id/cari_files/ico.png">
<meta name="description" content="Pencarian google dengan Ajax Integration" />

<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("search", "1");

$(document).ready(function() {
	$("#search").blur(function () {
		if($(this).val() == ""){
			$(this).val("Search...");
			$("#resultbox").css("display", "none");
		}
	});

	$("#search").focus(function () {
		if ($(this).val() == "Search...") {
			$(this).val("");
		}
	});

	$("#search").keyup(function () {
		$("#resultbox").css("display", "");
		$("#footer").css("display", "none");
		$(".siteheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Site...');
		$(".googleheader").html('<img src="images/loading.gif" width="16" height="16" style="margin-right:8px; vertical-align:-15%;" />Loading Results from Google...');

		/* === Google Search === */
		var sc = new GSearchControl();

		sc.addSearcher(new GwebSearch());
		sc.addSearcher(new GvideoSearch());
		sc.addSearcher(new GblogSearch());
		sc.addSearcher(new GnewsSearch());

		var drawOptions = new GdrawOptions();
		drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

		var foo;
		sc.setSearchCompleteCallback(foo, function(){
			$(".googleheader").html('Hasil Pencarian Google:');
		});
		sc.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);

	    sc.draw(document.getElementById("googlesearch"), drawOptions);
		sc.execute(document.getElementById("search").value);
		/* === End Search === */

		if($(this).val() == ""){
			$("#resultbox").slideUp(700, function(){
				$("#footer").css("display", "");
			});
		}
	});
});
//]]>
</script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>

<div id="searchbox">
	<h1>Google Ajax Search 1n53ct4</h1>
	<input type="text" id="search" value="Search..." autocomplete="off" />
	<div id="resultbox" style="display:none;">
		<div class="googleheader"></div>
		<div id="googlesearch"></div>
	</div>
</div>
<div id="footer">
	Copyright &copy; <?=date("Y")?> Muhamad Burhanudin powered by Gilbert Pellegrom
</div>

</body>
</html>

Berikutnya adalah code CSS :

/* ==================== */
/* === Reset Styles === */
/* ==================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ul, ol {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* =================== */
/* === Body Styles === */
/* =================== */
body {
	font-family:"Lucida Grande", Verdana, sans-serif;
	font-size:12px;
	line-height:1.5em;
	color:#000;
	background:#ccc;
}

h1 {
	font-size:26px;
	font-weight:bold;
	margin-bottom:30px;
}

p {
	padding-bottom:5px;
}

#searchbox {
	margin:0 auto;
	background:url(images/back.png) no-repeat top;
	width:700px;
	height:200px;
	margin-top:100px;
	padding:40px 0px 0px 40px;
	color:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

}
#resultbox {
	border: 3px solid #999;
	background:#fff;
	padding:15px;
	width:620px;
	margin-top:5px;
	margin-bottom:10px;
	color:#000;
	-webkit-border-radius:10px;
	-webkit-box-shadow:0px 0px 10px #000;
	-moz-box-shadow:0px 0px 10px #000;
	-moz-border-radius:10px;
}
#footer {
	margin:0 auto;
	width:700px;
	color:#999;
	padding-left:40px;
	margin-top:-25px;
}

input {
	font-family:Georgia;
	font-weight:bold;
	font-style:italic;
	padding:10px;
	font-size:20px;
	border: 3px solid #ccc;
	width:630px;
}

input:focus,
textarea:focus,
select:focus {
  border: 3px solid #999;
}

#googlesearch, #sitesearch {
	margin-left:20px;
}

.googleheader, .siteheader {
	font-size:18px;
	font-family:Georgia;
	font-weight:bold;
	font-style:italic;
	margin:20px 0px;
	border-bottom:1px solid #ccc;
	color:#666;
}
.siteheader {
	margin-top:5px;
}

/* Google Style Hacks */
.gsc-search-box, .gsc-configLabelCell {
	display:none;
}
.gsc-control {
	width:100%;
}

.gsc-tabHeader {
	padding:3px 8px 5px 8px;
}
.gsc-tabhActive {
	border-top:2px solid #666 !important;
}
.gsc-tabhInactive {
}

/* Link Colour */
#resultbox a, .gs-title, .gs-title b {
	font-size:13px;
	font-weight:bold;
	color:#2253AA !important;
}
.gs-visibleUrl, .gs-visibleUrl-short {
	color:#666 !important;
}

UntukCara mengatasi Install DotNet 3.5 Windows 8. Read more ... » Jquery dapat di download disini.

Demo / Download Sourcecode.

Posted in Html, PHP & mySQL, Programing and tagged , , , .