To adding Google search to blog ,many people know how ,but in this post ,I still want to write it down . Hope it useful to newbie ^^
1, First ,login to your blog ,and create a Page ,leave content blank and name it "search result" ,you will have a page with url like that http://your blog.blogspot.com/p/search-result.html
2, If you are using a Pages widget to show pages exist in your site ,go to Design - > page element -> click on edit button on Pages widget , in Configure Page List widget dialog,uncheck the option :Automatically add new pages when they are published and uncheck the search result page inPages to Show
click Save . If you are not using a Page widget ,you can ignore this step .
This step will make Blogspot not show search result page in page navigation of your blog .
3, The next step ,you need a Google account .This step is very easy because you're using Blogger ^^ .
Go to this page http://www.google.com/cse/manage/create and login .
4, There's a page to define all information for search engine . You can set your own options ,but I think you should set the option for search only your blog ,and in Sites to Search ,enter your blog address adding a * ,like this :
http://simplexdesign.blogspot.com/* . Google will understand the * for searching whole blog . You can limit the area for search using separately URL .
5,When you finish register new search engine , go to Dash board of your search .
In the Indexing , you have to submit your site map for Google indexing your site . With Blogger ,you can enter the Feed URL of your blog instead of a sitemap . You can enter url of the page you want to index separately .
In the Look and feel section , checked Iframe in Choose the hosting option . This option will help you create a custom search on your blog ,and show the result in a page of your site .In following tabs ,you can set the layout ,link color... of your custom search and result . After that ,click on Get code .
In Get code tab , enter the page where you want the search result show up into Specify the url in your site where you want the search result to appears text box .
In this case , enter the url http://your blog.blogspot.com/p/search-result.html
There are two blocks of code . One is Search box code and the other is Search result code .
Copy and paste Search box code and Search result code into two text files .
6,Go to Blogger ,to Dashboard ,continue to Design ,and then to Page element . Create a HTML/Javascript widget .
Paste the code of Search box code in to this widget .
7,Go to Posting tab,click on Edit Pages . There's a list of pages in your blog .Click on Edit in search result page . An editting window will appear . Click on Edit HTML tab and paste the code of search result into page content .
That's all .Save your page . From now ,you can search in your blog using Google Search engine . The result will be showed in search result page .
If you want to customize the search box ,you can add a little of CSS for make it look as you want .For example : I got a code for search box like this
<form action="http://your blog.blogspot.com/p/search-result.html" id="cse-search-box"> <div> <input type="hidden" name="cx" value="008412172873235352933:vknsgzepq88" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en=en"></script> I can add class for search form elements like this : <input type="text" class="ibox" name="q" size="31" /> <input type="submit" name="sa" class="btn" value="Search" />
and then ,using CSS to styling it ,like this :
<style> #cse-search-box{ background:none repeat scroll 0 0 #1C191A; display:inline; float:right; height:2.8em; overflow:hidden; padding-right:10px; } #cse-search-box input.ibox { background:none repeat scroll 0 0 #848484; border:1px solid #4C4C4C; display:inline; font-size:0.85em; height:16px; margin-top:5px; padding:1px 0 0 1px; width:140px; } #cse-search-box input.btn { line-height:1.75em; display:inline; float:left; font-size:0.92em; margin:7px 40px 0 12px; border:none; cursor:pointer; color:#f5f5f5; } </style>
the CSS code above is just an example ,you can add another CSS tags to make it look as you want .This CSS can be place in HTML/javascript widget which already contain search box code ,or you can place it in template file ,before </head>
In the search result page ,if the search result is larger than your page and break your page layout ,you can also add CSS script to make it smaller . Just go to Edit Pages in posting tab . click on edit of Search result page ,and paste CSS code in page content . like this :
<style> #cse-search-results iframe { width:600px; } </style> <div id="cse-search-results"> </div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 400; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"> </script>
you can add more CSS code to make it as you want .Of course ^^ .
This is my post for adding Google Search box to Blogger and show the result in a page of Blogger . I think it make search result look like a part of your site , not a stand alone page . In some case ,if the search can not find anything , it's just because Google is not index your page . You have to submit your page sitemap as I mentioned above and wait .
0 comments:
Post a Comment