Bootstrap Templates Bundle

Friday, September 6, 2013

Adding Google Custom Search Engine (CSE) on your website

Most of the website use search option on their website. Visitor can search and get anything easily by search option. It is better to add a custom search engine by Google on to website. Here I show you how to add Google Custom Search Engine (CSE) on your website. At first check two website for sample

http://deshtimes24.com/
http://banglanews24.com/

Deshtimes24 is developed by me. Now I'm telling how to add this custom search engine.

 <script language="javascript" type="text/javascript" src="http://bestcareerbd.com/Clients/cse-search-box.js"></script>
<script language="javascript" type="text/javascript" src="http://www.google.com/jsapi"></script>

Add this code between  <head> tag  and also put the below code where you want to show the search option. Also download cse-search-box.js file by visiting  http://bestcareerbd.com/Clients/cse-search-box.js

 <form class="srch_submit" action="http://www.google.com.bd/cse" id="cse-search-box" target="_blank">
            <input type="hidden" name="cx" value="000558933243491534581:qmhvj6dv8n4" />
            <input type="hidden" name="ie" value="utf-8" />
            <div class="btnSearch" id="btnSearch">
              <input id="q" name="q" class="q bangla_font" style="" type="text" maxlength="100" value="Search..." />
                <input id="sa" name="sa" style="" type="submit" value="" />
            </div>           
</form>
  Red color code inside <form> tag will be changed by your own

Search engine unique ID: 000558933243491534581:qmhvj6dv8n4

To get this unique id visit https://www.google.com/cse/manage/create and create an account for your website.

CSS code for this. Add below code into your css file'

#btnSearch{float:right;overflow:hidden;margin-top:0px;}
#q{font-size:13px;height:28px;width:160px;border:0;background-image:url(http://bestcareerbd.com/Clients/search_box_button.jpg);padding:0;margin:0;float:left;padding:0 10px;color:#666;}
#sa{font-family:SolaimanLipi;color:#D60000;border:none;cursor:pointer;height:28px;width:30px;border:0;background-image:url(http://bestcareerbd.com/Clients/search_button.jpg);padding:0;cursor:pointer;margin:0;float:left;}

No comments:

Post a Comment

Murphy - Home Maintenance & Repair Service HTML Template

Murphy is a handyman repair service Bootstrap HTML Template. It is ideal for either all-rounders or professional teams to introduce the...