Styling your blog is actually setting up the codes, it's like "set the codes get the look". In this tutorial I am going to show you how to place the Google custom search engine besides page list menu. As usual we need to place some codes in the proper place so that the search
engine finally appear besides page list menu as I am showing in my blog. Without discussing further I am going to explain the process of implementation.
engine finally appear besides page list menu as I am showing in my blog. Without discussing further I am going to explain the process of implementation.
Hope you will like this because I succeeded to find the exact position for placing the codes after wasting lots of time.
Follow the following steps
1) Go to www.google.co.in/cse and generate the custom search engine codes.
2) At first you will get the codes for the Search Box as shown in the following
3) Now insert the above search box scripts within a <div> as shown bellow
<div id='cse-search-form' style='width: 25%;float:right;margin:-2px 20px 0 0 ;'>
SEARCH BOX SCRIPT GOES HERE </div>
4) Go to Template-----Edit HTML-----Jump to Widget-----Select PageList1
5) Expand the widget codes and scroll down until you get a <ul> tag
6) Now place the step3 codes just after the <ul> tag, as shown below
<ul>
<div id='cse-search-form' style='width: 25%;float:right;margin:-2px 20px 0 0 ;'>
SEARCH BOX SCRIPT GOES HERE </div>
7) Now click on Preview and Save if everything goes well
8) Now create a New page and named it as Search Results and note the URL of the page
9) Now obtain the code for search results, it will be like
10) Now click on the link Search Result Details available just above the Step9 codes as shown below
11) Add the URL of the page mentioned in Step8 and click on Save
