How to Change the Title Tags in Blogger for More Search Engine Traffic

How to Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

How to Change the Titles:

• Go to Layout>edit HTML in your Blogger dashboard.
• Search for this tag:
• Replace this tag with the following code:

Save your template and you should see the results in your web browser as depicted in the images below.
It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!

How To Create Google Custom Search Engine ?

How To Create Google Custom Search Engine ?

 When it comes to crawling the internet or a website nothing can surely beat Google's searching technique. Blogger Templates that are found in various designs and colours often have custom search boxes in it, which I am sure you might have observed are incapable of displaying the relevant results. These search boxes by default are limited to their ability of searching each and every word of your blog. The best solution is to use Google Custom Search Engines (CSE) that are extremely efficient in digging out the most important data from your blog and displays it to the visitor. This increases the number of pageviews and page impressions of your blog because the reader is kept engaged in reading more and more. Further you can easily integrate your Google AdSense Ads to your Google Custom Search box, which again increases your blog revenue for every click made on the search results. An Example of such search engine can be found below every post of this (MBT) blog. So lets create and install a beautiful Google Search box for your blog.

How To Create a Custom Google Search Engine?

1. Go To Google CSE
2. Hit the create custom search engine button
3. Fill the form as shown in the screenshot below,

   4.   The Click the next button and choose the Design for your search engine. You can click the "Customize" button to edit the colours and look.

   5.  Hit the next button and then click the "Look and feel" link on the next page as shown below,

It will bring you a page where you will find three layout options i.e Full -width, Compact and Two Column as shown below,

• If you wish to add the search box just below posts as I have done on my blog then choose Full-width
• Or if you wish to display the box and results on the sidebar then choose compact
• Else if you wish to add your search box to your sidebar and display the search results above the post title then choose Two Column

  6.  Finally hit "save & get code" button and jump to the next part of our tutorial.

Add Google Custom Search Engine To Blog Posts

To add the search engine just below your blog posts as we have done on MBT then please follow the steps below,

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the Expand Widgets Templates Box
4. Search for
5. Just below it paste your Blog Post Search Engine Code (Full-width)
6. Save and you are done!
7. View your blog to see it appearing just below posts.

Add Google Custom Search Engine To Blog Sidebar

1. Go To Blogger > Design
2. Choose a HTML/ JavaScript Widget
3. Paste your Sidebar Search Engine Code (Compact or Two Column) in it
4. Save and you are done!
5. View your blog to see it working just fine

Changing your default search box to Google Custom Search Engine Box is an important step that you must take as early as possible. You will see the difference in your analytics the next week. In the next post as shared below you will learn to integrate your AdSense Ads to your Custom Search engine and increase your Adsense earnings.

 

How To Integrate AdSense In Google Custom Search Engine ?

How To Integrate AdSense In Google Custom Search Engine ?

In our previous post we explained in detail the importance of Google custom search engine with regard to your website internal search and page views, its now time to monetize your search engine to further increase your AdSense for Search revenue. This search engine displays AdSense Ads when a visitor searches for a query at your site/blog, as shown in the screen shot below,

The ads when clicked or even if just viewed by the visitor will increase your Pay Per Click and Page Impressions earning. Now without wasting any further time lets now learn on how to associate your AdSense account with your Custom Search Engine account.

How to Display Ads in Google Custom Search Engine?

After you have successfully created  your custom search engine and installed it on blogger, you need to monetize it by following the simple steps below,

1) Go To Manage CSE

2) Click the Control Panel link close to the name of your search engine. In my case it is My Blogger Tricks as shown below,

3) Then click the link Make Money at the left pane,

4) The finally on the next window that appears simply click the option that says "I already have an AdSense account" and fill the simple form with your email ID, postal code and the last 5 digits of your mobile number that you submitted to AdSense while creating an account.

5) Hit the Submit button and you are done!

6) Log into your Adsense Account and simply click the link that may appear at the top of your dashboard which will ask you whether or not you wish to let the Custom Search engine to access your AdSense Ads. Simply click it and enjoy the happy new earning! =)

How To Change Size, Font Family and Color Of Custom Google Search Engine

How To Change Size, Font Family and Color Of Custom Google Search Engine

Google Custom Search Engine is another option that Adsense provides to increase your blog revenue. I shared detailed posts on how to create a custom search engine and integrate adsense in it. However the problem with the customization and editing options that Google provides lacks complete control over the margining and padding of the search box. Today we will learn on how to change the look of the search box using our own custom styles and change the size and alignment of the box elements. It is perfectly alright to edit the stylesheet (i.e. CSS Code) of the search engine because it is just a design change and therefore it does not violate any of Adsense terms of service. So lets get going!

DEMO: You will find the Minimalist Theme of the Search box on my sidebar.

Customize Google Search Box

I assume you have already tried our tutorial on Custom Search engines and have installed the search box on your blog sidebars. If not then you may first try them.

1. Create a Custom Google Search Box
2. Make Money With Google Custom Search Engine

The code that Google provides you will look slightly similar to this one,
Note: You are not going to use the code shared here. It only gives you idea on how to edit your own Google code for your search engine.

Loading

The CSS code is the one enclosed between the two yellow highlighted lines. This code is responsible for the over all look of your box. To keep things simple we will be focusing only on the three coloured sections of the code and I will refer them as Purple, Orange and Green section.

If you want your search box to look exactly like mine then create a search box as instructed in our previous tutorial and choose the style as "Minimalist" Then replace the first three sections of your CSS code with the ones I shared above as purple, orange and green. That's it.
However if you wish to edit the style of your current search box then you only need to change the CSS properties which are enclosed between the curly brackets i.e. {}
Lets first understand the three sections.

• The Purple section is responsible for the look of the box that contains the Input rectangle and search button.
• The Orange section is responsible for look of the input box where users write query.
• The Green section is then responsible for the look of the Search/Submit button

The purple CSS code is as follows:

.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #ffffff;
    background-color: #ffffff;
  }

In my case I have kept border color as white and background color as white. To Change the border and background colors simply change the hexadecimal code by using our color generator Tool. If you wish to use a background image instead and you wish to change the box height and width then you may alter the same purple code as follows.

.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #ffffff;

    background: url(ADD IMAGE LINK HERE) no-repeat;
    height:25px;
    width:300px;

  }

Replace ADD IMAGE LINK HERE with image direct link and change the width and height size to suit your alignment.
The Orange CSS Code is as follows:

input.gsc-input {
    border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
  }

This will style the rectangular input box where you write query text. Now here we can introduce and change several new styles like font size, font type, text area size, text color etc. You can also set a gap between the text area and the search button using padding. You can make these alterations if you wish else you can use the code in its default form and replace your input section with this orange one. Altered code is:

input.gsc-input {
    border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
font-size:12px;
font-family:arial;
font-weight:normal;
  }

I am sure the code is easy enough to be edited. You can choose the following font families as standards: Arial, Verdana or sans-serif. Font weight turns the text thickness. You can choose normal or bold. To change to text color simply change color:#666
The padding is actually the distance between the outline of the input box (Text Area box) and the text. Keep it as default. If you wish to change it then it follows this order:
padding:Top Right Bottom Left; In my case I have set them as padding:5px 0px 4px 0px;
The Green CSS Code is as follows:

input.gsc-search-button {
    border-color: #333333;
    background-color: #333333; margin-left:1px;
  }

This code changes the look and appearance of the Search/Submit button. You can edit it as there is nothing new except the margin property.
A margin is the gap distance between the search button and Text Input Box. You can set other margins too. Altered code is here:

input.gsc-search-button {
    border-color: #333333;
    background-color: #333333; margin-left:1px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
font-size:12px;
font-family:Arial;
font-weight:bold;

  }

Start playing with these and keep saving your widget to see the preview.

Need Help?

Try customizing your search box using the simple method shared above. If you needed any help then feel free to let me know. Do share the CSS code of your search box while asking a question. I hope this helps most of you. Peace brothers.