Showing posts with label search box. Show all posts
Showing posts with label search box. Show all posts
Sunday, October 3, 2010
Attractive Subscribe Section + Search Box For Blogger
In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social
Saturday, June 16, 2007
FireFox with Google toolbar for your blogging tasks
I just finished a long post iContact for your blog, especially business blogs. I used the Flock browser for preparing that post and there is no Google toolbar for that browser. I very much prefer to use the built-in Spell-check in the Google toolbar for preparing my posts, and I will explain why later.
Reason why I use Flock for preparing that post rather than my preferred FireFox with the Google toolbar: I have more than 1 Blogger account, and that means more than 1 Google account. Nothing sinister about that. When Blogger Beta was first introduced, there were lots of complaints in the Google Blogger Help group - not being able to see their previous in the Dashboard and thus not being able to access them to create or edit posts, etc. I didn't migrate my account then to the beta account, but stared a new Blogger Beta account to test the new features, and started Testing Blogger Beta (now New Blogger), which I still update plus create new blogs (I am afraid of running into Blogger limits). Further, I have other blogs for other purposes like my environmental blogs such as Enviroman which require a different profile. And I do multi-tasking and thus often have more than 1 browser opened in my computer simultaneously.
Anyway, as promised, I will now explain why I prefer to use the built-in spell checker in the FireFox Google toolbar. As mentioned earlier, when I prepared the long post mentioned above, I had to use the Flock browser which don't have a Google toolbar. I was forced to use the spell checker in the Blogger post editor toolbar. That is OK as long as the words that are misspelled has an alternative presented to you is included in the list of alternatives presented to you when you proceed to correct the mistake. But there were a number of spelling mistakes in that long post, for which the correct spelling wasn't listed in the list of alternatives. I had to click "Resume editing" and the vertical scroll bar didn't remain where it was but scrolled automatically back to the top of the post editor window. I had to spend a lot of time searching for that misspelled word which was extremely irritating. If I had used the built-in spell checker in the FireFox Google toolbar, there will be other alternatives - Edit, Ignore all, Add to dictionary. I would be able to click "Edit" and correct the spelling there and then (without having to go to the trouble of having the click "Resume edit" and wasting my time searching for that misspelled word which wouldn't be highlighted when using Blogger spell check) and then immediately proceed with checking the rest of the post of misspelled words. If those are "words" used by Blogger for the HTML for images, etc., I can chose to add them to the dictionary. Or I can chose ignore and continue with the editing or preparing.
There are other advantages about having the FireFox Google toolbar which I like, including the PageRank bar which you can use to check the PageRank of your blog or any other sites easily. There will be privacy issues involved but I am not concerned as I don't think I have anything to hide. There is also another post explaining why having the PageRank bar is useful at Precautions to take before linking to a site (click BACK button to get back to this page).
I also like the built-in Google search box in the Google toolbar:
As you can see, you can chose to search only the site you are on (which will be very useful if you are searching for something in that site, but the site creator didn't provide for a site search box) and other options.
One more thing is the ability to toggle highlighting of search terms in a page which can help you zero in onto something you are searching for in a page:
Reason why I use Flock for preparing that post rather than my preferred FireFox with the Google toolbar: I have more than 1 Blogger account, and that means more than 1 Google account. Nothing sinister about that. When Blogger Beta was first introduced, there were lots of complaints in the Google Blogger Help group - not being able to see their previous in the Dashboard and thus not being able to access them to create or edit posts, etc. I didn't migrate my account then to the beta account, but stared a new Blogger Beta account to test the new features, and started Testing Blogger Beta (now New Blogger), which I still update plus create new blogs (I am afraid of running into Blogger limits). Further, I have other blogs for other purposes like my environmental blogs such as Enviroman which require a different profile. And I do multi-tasking and thus often have more than 1 browser opened in my computer simultaneously.
Anyway, as promised, I will now explain why I prefer to use the built-in spell checker in the FireFox Google toolbar. As mentioned earlier, when I prepared the long post mentioned above, I had to use the Flock browser which don't have a Google toolbar. I was forced to use the spell checker in the Blogger post editor toolbar. That is OK as long as the words that are misspelled has an alternative presented to you is included in the list of alternatives presented to you when you proceed to correct the mistake. But there were a number of spelling mistakes in that long post, for which the correct spelling wasn't listed in the list of alternatives. I had to click "Resume editing" and the vertical scroll bar didn't remain where it was but scrolled automatically back to the top of the post editor window. I had to spend a lot of time searching for that misspelled word which was extremely irritating. If I had used the built-in spell checker in the FireFox Google toolbar, there will be other alternatives - Edit, Ignore all, Add to dictionary. I would be able to click "Edit" and correct the spelling there and then (without having to go to the trouble of having the click "Resume edit" and wasting my time searching for that misspelled word which wouldn't be highlighted when using Blogger spell check) and then immediately proceed with checking the rest of the post of misspelled words. If those are "words" used by Blogger for the HTML for images, etc., I can chose to add them to the dictionary. Or I can chose ignore and continue with the editing or preparing.
There are other advantages about having the FireFox Google toolbar which I like, including the PageRank bar which you can use to check the PageRank of your blog or any other sites easily. There will be privacy issues involved but I am not concerned as I don't think I have anything to hide. There is also another post explaining why having the PageRank bar is useful at Precautions to take before linking to a site (click BACK button to get back to this page).
I also like the built-in Google search box in the Google toolbar:
As you can see, you can chose to search only the site you are on (which will be very useful if you are searching for something in that site, but the site creator didn't provide for a site search box) and other options.
One more thing is the ability to toggle highlighting of search terms in a page which can help you zero in onto something you are searching for in a page:
Friday, February 16, 2007
How to put a sitesearch box in your blog
In every blogspot.com blog, there should be a search box in the navbar at the top left corner of the page. Putting a search term in the box will lead to a page with all the posts containing that search term.
However, some bloggers for various reasons like to hide or remove this navbar. You can replace this a Google sitesearch box like the one in the Header of this blog. However, to be able to do that, you have to have an AdSense account. If you want to apply for an AdSense account, you can click on the text link that reads "Generate revenue from your website. Google AdSense" at the top of the right sidebar. Also, this search box works in a different way from the search box in the navbar. It produces a page with links to posts that contain the search term.
Blogger tips
There is one more way of putting a search box that gives the same result as the search box in the navbar, that is, producing a page that contains all posts rather than links. You can see an example of the search box at this blog: Good Health Information. The search box is at the bottom of the left sidebar, below the profile. Try typing in a search term (for example - diet) into the box and click "Search" and observe what is the result. You will get a page of all the posts that contain the term "diet" in it.
The method to do this is as follows. In the Layout, click on "Add a Page Element", then select HTML/Javascript and click "Add to blog". Then in the resulting box, paste this script:
<div class="widget-content"><form id="searchblog" action="/search"
style="display: inline;" method="get"><input id="search-box" name="q"
size="20" type="text"/><input id="search-btn" value="Search"
type="submit"/></form></div>
If you wish, type in a title like what I have done (Search This Site), then click "Save changes". The new Page Element will appear at the top of whichever section you have added the Page Element (in my case, it was in the left sidebar). Drag and drop to whatever position you want, preview if you want, then at the top right of the Layout, click "Save".
Update 29 May 2007: In the demonstration blog Good Health Information, you may have noticed that there are 2 search boxes, one which is the Google sitesearch box right above the main column, and the one generated using the method described here at the bottom of the left sidebar. I have put the Google sitesearch bar in a more prominent position because of 3 reasons. I can chose to have the search result open in the same or different window with the Google sitesearch box. Also, the search result page opened by using the Google sitesearch box was generated by using my Google AdSense account. Further, I can configure the background color of the Google sitesearch box as described in Blending the color of your searchbox to the colors of your site. AdSense also places unobtrusive ads at the side of the search result page that are relevant to the search. I personally do not mind such ads because they are relevant to the matter at hand. In fact, I have AdSense in most of my blogs and I have to take care not to click on them even when the ad offers something that interest me, which is not infrequent. That would be an invalid click and can get me banned from AdSense. If you want a Google AdSense sitesearch box, you will have to join the AdSense program which you can do by clicking the text link that says "Generate revenue from your website. Google AdSense" at the top of the right sidebar of all my blogs, including this one.
Acknowledge: This tip was obtained from Teancum of What to do at SVU
However, some bloggers for various reasons like to hide or remove this navbar. You can replace this a Google sitesearch box like the one in the Header of this blog. However, to be able to do that, you have to have an AdSense account. If you want to apply for an AdSense account, you can click on the text link that reads "Generate revenue from your website. Google AdSense" at the top of the right sidebar. Also, this search box works in a different way from the search box in the navbar. It produces a page with links to posts that contain the search term.
Blogger tips
There is one more way of putting a search box that gives the same result as the search box in the navbar, that is, producing a page that contains all posts rather than links. You can see an example of the search box at this blog: Good Health Information. The search box is at the bottom of the left sidebar, below the profile. Try typing in a search term (for example - diet) into the box and click "Search" and observe what is the result. You will get a page of all the posts that contain the term "diet" in it.
The method to do this is as follows. In the Layout, click on "Add a Page Element", then select HTML/Javascript and click "Add to blog". Then in the resulting box, paste this script:
<div class="widget-content"><form id="searchblog" action="/search"
style="display: inline;" method="get"><input id="search-box" name="q"
size="20" type="text"/><input id="search-btn" value="Search"
type="submit"/></form></div>
If you wish, type in a title like what I have done (Search This Site), then click "Save changes". The new Page Element will appear at the top of whichever section you have added the Page Element (in my case, it was in the left sidebar). Drag and drop to whatever position you want, preview if you want, then at the top right of the Layout, click "Save".
Update 29 May 2007: In the demonstration blog Good Health Information, you may have noticed that there are 2 search boxes, one which is the Google sitesearch box right above the main column, and the one generated using the method described here at the bottom of the left sidebar. I have put the Google sitesearch bar in a more prominent position because of 3 reasons. I can chose to have the search result open in the same or different window with the Google sitesearch box. Also, the search result page opened by using the Google sitesearch box was generated by using my Google AdSense account. Further, I can configure the background color of the Google sitesearch box as described in Blending the color of your searchbox to the colors of your site. AdSense also places unobtrusive ads at the side of the search result page that are relevant to the search. I personally do not mind such ads because they are relevant to the matter at hand. In fact, I have AdSense in most of my blogs and I have to take care not to click on them even when the ad offers something that interest me, which is not infrequent. That would be an invalid click and can get me banned from AdSense. If you want a Google AdSense sitesearch box, you will have to join the AdSense program which you can do by clicking the text link that says "Generate revenue from your website. Google AdSense" at the top of the right sidebar of all my blogs, including this one.
Acknowledge: This tip was obtained from Teancum of What to do at SVU
Tuesday, February 13, 2007
Ways of putting searchbar, AdSense ad units, link units, hyperlinks, text, etc in the Blog Header as well as above the post in every page
Got a question from a reader of my blog in the comments section of this post Incorporate AdSense ads in your New Blogger (formerly Blogger Beta) posts. The question was: "How do i add adsense codes as you did on your page on Top right hand side and also on header below search. Currently, i m using 3 column blogger (http://visitformoney.blogspot.com). How do i put adsense code as you did on your site Peter?" in the comments section. As it will be difficult to answer it in the comments section, I thought I will answer it with a post.
The first thing that need to be done is to add "Add a Page Element" in the Header section and the post section of the blog Layout. Refer to the following posts for these:
Adding graphic, AdSense ads, etc to your New Blogger (formerly Blogger Beta) blog Header
New Blogger (formerly Blogger Beta): How to add AdSense ads, searchbar, "sticky post", etc. to your blog
In the pop-up, select HTML/Javascript, and paste your script there. Then click "Add to blog". If the Page Element is not in the place you want, hover your mouse over the Page Element, drag and drop to whereever you want it.
If you want another page element to contain, for example the link unit, just repeat the process.
BTW, you can actually incorporate both scripts into the same HTML/Javasscript Page Element if you wish.
The first thing that need to be done is to add "Add a Page Element" in the Header section and the post section of the blog Layout. Refer to the following posts for these:
Adding graphic, AdSense ads, etc to your New Blogger (formerly Blogger Beta) blog Header
New Blogger (formerly Blogger Beta): How to add AdSense ads, searchbar, "sticky post", etc. to your blog
Adding AdSense Ad units, link units or searchbar to the blog Header
First generate the script for your Ad unit, link unit or searchbar in your AdSense Account. Then sign into Blogger Dashboard, select the blog and click LAYOUT. See screenshot below. Click to enlarge:
In the pop-up, select HTML/Javascript, and paste your script there. Then click "Add to blog". If the Page Element is not in the place you want, hover your mouse over the Page Element, drag and drop to whereever you want it.
If you want another page element to contain, for example the link unit, just repeat the process.
BTW, you can actually incorporate both scripts into the same HTML/Javasscript Page Element if you wish.
Adding Searchbar and other stuff above the post in every page
Take this blog for example: Dummies Guide to Google Blogger, what I did was incorporate the AdSense searchbar together with the hyperlink and the text within the same HTML/Jayascript Page Element. I put the script in the scrollbox below for you to see:<!-- SiteSearch Google -->
<form action="http://www.google.com/custom" target="google_window" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">
<br/>
<input value="dummies-guide-to-google-blogger.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="35" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Google Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="Search the Web"><font color="#000000" size="-1">Web</font></label></td>
<td>
<input id="ss1" checked value="dummies-guide-to-google-blogger.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search dummies-guide-to-google-blogger.blogspot.com"><font color="#000000" size="-1">dummies-guide-to-google-blogger.blogspot.com</font></label></td>
</tr>
</table>
<input value="pub-94080740917" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3432092235" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
<center><a href="http://dummies-guide-to-google-blogger.blogspot.com/1999/12/content.html"><h1>CONTENT</h1></a></center>
<center>Click on above to get to the CONTENT page. Find topics by using the searchbar above or in the navbar at the top-left corner of the page or use the Labels in the right sidebar</center>
<form action="http://www.google.com/custom" target="google_window" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">
<br/>
<input value="dummies-guide-to-google-blogger.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="35" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Google Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="Search the Web"><font color="#000000" size="-1">Web</font></label></td>
<td>
<input id="ss1" checked value="dummies-guide-to-google-blogger.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search dummies-guide-to-google-blogger.blogspot.com"><font color="#000000" size="-1">dummies-guide-to-google-blogger.blogspot.com</font></label></td>
</tr>
</table>
<input value="pub-94080740917" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3432092235" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
<center><a href="http://dummies-guide-to-google-blogger.blogspot.com/1999/12/content.html"><h1>CONTENT</h1></a></center>
<center>Click on above to get to the CONTENT page. Find topics by using the searchbar above or in the navbar at the top-left corner of the page or use the Labels in the right sidebar</center>
