custom search engine

This topic i explain about how to make search engine in your site. this is simple concept your posted value directly search on google search engine. that value posted on form action page follow the below code and live demo.

 Live Demo          Download

HTML

<form method="get" action="http://google.com/search">
<p align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhgNZmmufhc_CGbvWHxBcxpWVqo1Bd4FJFibJih0Sl1dO1MtTw8WLYaavIxxdOX3XLJqIIBa4Gq7SEM-QdSNNMmOxIssjzZJFEmIqa5yOAMED9apwgyInVR9m9C37be54R3kZG5gF_BfH/s1600/logos.png" /></p>
<p>
<input name="q" placeholder="Just type your text here press enter ex : Mostlikers"  type="text" class="search" />
</p>
<p align="center">
<input type="submit" name="submit" id="click" class="but" value="Mostliker search"  />
 <input type="submit" name="submit" class="but" value="I m Feeling lucky" /> </p> 
<p class="lang">mostlikers.co.in offered in: 
<a href="#">Hindi</a>&nbsp;<a href="#"> Bengali </a>&nbsp;
<a href="#">Telugu </a>&nbsp;<a href="#">Marathi </a>&nbsp;
<a href="#">Tamil </a>&nbsp;<a href="#">Gujarati</a><a href="#">
 Kannada</a>&nbsp;<a href="#"> Malayalam</a></p>
</form>

form action posted on direct to google page just type your text its posted on google search engine

CSS

.login form { width:600px; height:0 auto;  margin:0 auto; }
.search { border: 1px solid #ccc;width:572px;min-height: 30px;
padding: 4px 20px 4px 8px;font-size: 18px;-moz-transition: all .2s linear; 
-webkit-transition: all .2s linear;transition: all .2s linear;}
.search:hover { width: 572px;border-color:#999999;}       
.search:focus { width: 572px;border-color:#03F;outline: none;}
.but{ padding: 6px 10px;color: #222;border-radius:3px solid #00F;
border:1px solid #CCC;background: #f4f4f4;margin-bottom:4%;font-weight:bold;cursor:pointer;
font-size:75%;font-family: arial,sans-serif;-moz-border-radius: 3px ;-webkit-border-radius: 3px;
border-radius: 3px ;  }
.but:hover { padding: 6px 10px;color: #222;background: #f4f4f4;margin-bottom:4%;
cursor:pointer;font-size:75%;border-color:#f7f7f7;font-family: arial,sans-serif;
-moz-border-radius: 3px ;-webkit-border-radius: 3px; border-radius: 3px ;  }
.but:before { content: '🔍'; } 
.lang a{ font-weight:100px;text-decoration:none;}

Live Demo