Advance Search Box for Blogger

Adding the CSS

Add the below css code before ]]></b:skin> tag

#w2bOldSearch {
	display: block;
	clear: both;
	margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFK1Zmuz56kaZKNPtGstpmGzUrqwyQR63a7KMnAWML_cC6hDG2-FuvA_vFzvL79cZJvcEovaXjxutiu67muGcakA0qir0BBflDa4j7cAA87CO_MRJYJBYLOaWSISrXO6Z-QbDlpkbipxl/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
	padding: 7px 15px 7px 35px !important;
	color: #444;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #D3D3D3 !important;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 1px 1px 2px #CCC inset;
	-moz-box-shadow: 1px 1px 2px #CCC inset;
	box-shadow: 1px 1px 2px #CCC inset;
}

#w2bOldSearch #w2bSsubmit {
	color: #444;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 15px;
	border: 1px solid #D3D3D3;
	cursor: pointer;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background: #fbfbfb;
	background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
	background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Adding the Widget Code

Add the below widget Code in HTML/JavaScript Gadget.

<div id="w2bOldSearch">
	<form action="/search">
		<input type="text" name="q" id="w2bSinput" />
		<input type="submit" value="Search" id="w2bSsubmit"/>
	</form>
</div>

That’s it! If you liked the widgets and this post then please share it.