I myself find out that Blogger Search engine is not good . Its result is not accuracy . I search for a term but it give me some posts that is not related to what I search . I don't know why . Many peoples tell me something like that .So I switch to Google search . When your blog is crawled by Google Search engine ,it can search for whole blog with a high accuracy .
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 in Pages 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 .
That's all . Thanks for reading .
0 comments:
Post a Comment