Integrating Google Co-op Custom Search Engine (CSE) with your blog.

Google Co-op's Custom Search Engine (CSE) gives a great amount of flexibility in seamlessly integrating the search functionality into your blog. Here I will show a simple way to integrate the search functionality in a blogger (new version) blog.

1. If you have not already created a Custom Search Engine then create one now here.
   
2. Once you create your Custom Search Engine, you'll get the following confirmation page:
   
   If you have already created a custom search engine, click My search engines.
   
3. Click control panel
   
4. Click Code
   
5. Now if you do not want the search results to be blended along with your website / blog layout...
   
   
   
   1. Under Search box code for your website select how you want the Google logo to appear. If you do not want a google branding on your website/blog then leave it as it is. We shall remove it later.
      
   2. Click Save Changes
      
   3. Click anywhere on the box below the line which says "Paste this code in the page where you'd like your search box to appear. The search results will be shown on a Google-hosted page." The entire contents of the box will be highlighted which means it has been selected and now you can copy it straight to the page / template where you want the search box to appear.
      
   
   
   If you want the search results to be integrated into your website or blog...
   
   Note: If you are using the new version of blogger and want the search results to appear as if they were on the same blog, you'll have to create another blog with the same layout template. For example for HashOut, I have created another blog with the url searchhashout.blogspot.com with the same header and footer elements but nothing in between.
   
   
   
   1. Click Search box and search results code for your website
      
   2. Select how you want the Google logo to appear. If you do not want a google branding on your website/blog then leave it as it is. We shall remove it later.
      
   3. Under "Specify the URL of the page on your site where you want the search results to appear:" enter the url of the web page or blog where are going to paste the search results code. If you're using the new version of blogger enter the URL of the blog you created for your search results.
      
   4. Select how you want advertisements to be displayed in your search results. You can later even monetize from the ads displayed in your search results by linking your AdSense account with your Google Co-op CSE.
      
   5. Click Save Changes
      
   6. Click anywhere on the box below the line which says "Paste this code in the page where you'd like your search box to appear." The entire contents of the box will be highlighted which means it has been selected and now you can copy it straight to the page / template where you want the search box to appear.
      
   7. Now select and copy the code from the box below the line which says "Place this code in the page you'd like your search results to appear." and paste it into the HTML source code of the page on your website or blog. If you're using the new version of blogger insert the search results code into the template of your new blog you created for search results, in a place where you'd like it to appear. I inserted the code in between the header and footer elements.
      
   
   
6. Now if you do not want the Google branding on your search box then you can remove the line highlighted in red below:
   

   
   <!-- Google CSE Search Box Begins -->
     <form id="searchbox_012345678901234567890:abcdefghijk" action="">
       <input type="hidden" name="cx" value="012345678901234567890:abcdefghijk" />
       <input type="hidden" name="cof" value="FORID:11" />
       <input name="q" type="text" size="40" />
       <input type="submit" name="sa" value="Search" />
       <img src="http://google.com/coop/images/
   google_custom_search_smnar.gif" alt="Google Custom Search" />
     </form>
   <!-- Google CSE Search Box Ends -->
   

   
   
7. Save, publish and You're done!
   

If you want to monetize the ads placed in your search results, click Make money under Control panel and follow the steps as instructed. » Continue reading

Read more on AdSense, Blogger, Blogging, Web Designing

How to place google adsense code on web pages

I know that this post might sound silly, but there are indeed people coming to this blog searching for "step-by-step procedure to place google adsense code in our web pages". It's not necessary that all of them out there are an expert like you. So if you're new to HTML and web design, here is a guide to add adsense code to your webpage.

1. The first step is to get your AdSense code.
   
   
   
   1. Sign in to your AdSense account
      
   2. Click AdSense Setup
      
   3. Click AdSense for content
      
   4. Choose the ad type you want then click Continue
      
   5. Choose the ad format and colors then click Continue
      
   6. Choose or create new channel(s) for the ad then click Continue
      
   7. Click anywhere on the Your AdSense code: box. The entire code will automatically be highlighted / selected. You'll know the code has been selected when the entire contents of the box are highlighted in blue. Now copy the highlighted code (Press Ctrl+C on a Windows PC or right click and click copy or from your browser's Edit menu, choose Copy in order to copy the highlighted area.).
      
      
   
   
2. Now we'll proceed to paste the copied code to the HTML source of the webpage.
   
   HTML (Hyper Text Markup Language) is the programming language used to write web pages for the World Wide Web (WWW). Web browsers use HTML to interpret and display the contents of the web page. All HTML documents consist of elements contained within bracketed tags which tell the browser how to treat the contents of the element. Most HTML elements are contained within an opening tag <XXX> and a closting tag </XXX> where XXX is the tag identifier like HTML, HEAD, BODY, TABLE, DIV, SPAN etc. Some elements do not have a closing tag and are represented by the <XXX/> tag like BR, IMG etc. An HTML document has the following basic structure:
   

   
   <HTML>
   <HEAD>
   
   </HEAD>
   <BODY>
   
   </BODY>
   </HTML>
   

   
   The opening <HTML> tag indicates the start of an HTML document. The header information is enclosed between the HEAD tags (<HEAD> and </HEAD>) and is not displayed when you view the page in a browser. Any text between the BODY tags (<BODY> and </BODY>) is displayed in the browser. The closing </HTML> tag indicates the end of the HTML document.
   
   We need to place the ad code between the opening <BODY> and closing </BODY> tags of the source code.
   
   
   
   
   1. Open / Run your HTML editor
      
   2. Open your HTML source code file (Usually a .htm or .html file and if you are using server side scripting then the web page file would usually have a .asp, .jsp or .php file extension).
      
   3. Click to place the cursor on the spot where you want to place your ad. Now click Paste from the Edit menu.
      
   4. Once you've finished pasting the AdSense code in all the desired locations (currently you can have a maximum of three AdSense ad units on a page.), save the page and upload or publish your updated web page(s) to your web server.
      
   
   

Please note that the AdSense code which you pasted should look exactly the same after saving and publishing the page(s), else it might violate the AdSense Terms of Service (TOS) and might not even show the desired result. » Continue reading

Read more on AdSense, Web Designing

Blog Study: Acquire Wisdom and Live With Passion

Sam Chan of Acquire Wisdom and Live With Passion needs some suggestions to improve his blog. Well, frankly speaking, I feel the blog is quite good enough for its purpose. However, Sam can surely make certain changes to help his blog visitors. Here they go:

1. The first thing I noticed was that there are a lot many posts on the home (index) page. I feel that could increase the time required to download the complete page resulting in visitors with slow download speeds abandoning the blog without even having a look at it.
   
2. If ads are an important source of income for Sam then I feel they should be placed somewhere above the fold i.e. somewhere at the top of the page so that visitors don't have to scroll down to view the ads. They should preferably be placed after the post title and within the post body. AdSense's Large rectangle is the format that will give best results.
   
3. The search box can be placed somewhere at the top right corner of the page which is kind of default location for search boxes. Further Sam can use Google CSE to tightly integrate the search facility into the blog and also monetize user searches.
   
4. Even though Sam has changed the default background image of the standard blogspot template "Thisaway Green", it would be advisable to further customize the template so as to have a unique identity.

The best part of Sam's blog, as told by Kerry Dale Hancock Jr is that he "knows how to put the perfect picture with all his posts." » Continue reading

Read more on AdSense, Blogging, Marketing and Advertising, Web Designing

Creating a translucent background effect using a PNG image

A lot of people have asked me how I created the translucent background effect on my personal blog. So here is the trick.

1. Open Microsoft Photo Editor that comes along with Microsoft Office versions prior to MS Office 2003. If you are using MS Office 2003 or don't use MS Office at all then download MS Photo Editor from here.
   
2. Select File > New then select Width as 1 Cm and Height as 1 Cm and click OK.
   
3. Set the color of the background as per your desire/design.
   
4. From the toolbar select and click anywhere on the image.
   
5. In the Change Color to Transparent dialog box set Transparency to 20%. If you need more transparency, increase this value. If you select 100%, the image will become completely transparent. If you need a more opaque background, set a value lesser than 20%. Selecting 0% will keep the image as is.
   
6. Now click Image > Resize and select Pixels as Units and Width as 1 and Height as 1. Click OK
   
7. Click File > Save. Select the folder where you want to save the file and give the file a name, I gave it "translucent" and select Portable Network Graphics (*.png) under Save as type. Click Save. Close Microsoft Photo Editor.
   
8. Now upload the image to your web server or where ever you host your graphics files.
   
9. Now we need to edit the html of your web page(s). Set the background image of the page either using CSS (as below) or directly inserting the style element within the body tag. Now enclose the content that you want with a translucent background within div tags and set the background image of this div tag to the graphic image that we created using Microsoft Photo Editor. Again, you can either use CSS (as below) or insert the style element directly into the div tag.
   

   <html>
     <head>
       <style type='text/css'>
         body {
           background: url("http://www.yourdomain.com/pathtothebackgroundfile/background.jpg") top center no-repeat fixed;
         }
         #outer-frame {
           background: url("http://www.yourdomain.com/pathtothegraphicfile/translucent.png");
         }
       </style>
     </head>
     <body>
       <div id="outer-frame">
         Your content goes here
       </div>
     </body>
   </html>
   

   
   
10. Save the html page/template.
    
11. Publish your html page/template. You're done.
    

» Continue reading

Read more on Web Designing