Showing posts with label Blogger Tricks. Show all posts
Showing posts with label Blogger Tricks. Show all posts

Tuesday, March 18, 2014

Optimizing Your Post Titles For Better Search Engine Ranking



Blogger / Blogspot default setting defines that in search results, your blog title will appear first then followed by your post title. It is not effective because people tend look for specific contents, which is located inside one of your posts and not represented by your blog title.

Our website is also not alone in search results, there are others’ too and we have to compete healthily for traffic. Also, the last part of our title might be omitted if search engines consider that our title is too long.As many search engine like google will display only 60 characters or letters. It is a big problem if the blog title appears in the beginning, and the post title that represents the contents appear last (and omitted partially). Therefore, it will be great if the title introduces the contents directly (first), and show the blog title later (and omit-able).

For example, if you have a blog named “True Blogger Tricks” and you wrote a post titled “Top 10 Best templates of 2013”. Then someone uses search engine and types “best templates 2013” in the search query, normally, your site will appear in the search results as:

True Blogger Tricks : Top 10 Best Templates of 2013
The description of the blog
http://truebloggertricks.blogspot.com/p/10-templates

Seems OK? Nope, it is a disaster if the search engine consider the title too long and omit some part of it like:

The description of the blog
http://truebloggertricks.blogspot.com/p/10-templates

"Top 10 best what??" is what your potential visitors will say before clicking another title, which contains more clarity.


 After little modification, we can set the title to appear as:

Top 10 Best Templates of 2013 ~ True Blogger Tricks
The description of the blog
http://truebloggertricks.blogspot.com/p/10-templates

And if search engines think that the title is too long and then omit some part of it, don't worry. The title will still be representative enough as:

Top 10 Best Template of 2013 ~ True....
The description of the blog
http://truebloggertricks.blogspot.com/p/10-templates

This second type of title appearance pattern certainly performs better in introducing its contents in search results. Contents are first, and blog title later, so that potential visitors can get clear information about the contents fast and effectively.

How To Optimize Your Post Titles :

  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed >  Expand Widget Templates
  • Press Ctrl + F and find the below red code shown below. 

 <head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Then we need to change them with these codes:

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> || <data:blog.title/></title>
</b:if>

Therefore, the resulting codes will look like:

 <head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> || <data:blog.title/></title>
</b:if>

Then save the template, and the next time a search engine crawl your blog, the new setting will be applied handsomely.

Options: the character ~ are shown directly in the title and does not represent any code, so you can change it with another characters like @, -, |, #, etc if you wish.

You can check whether the codes are working or not by opening one of your posts, and observe its title on the upper part of your browser. For example, in Mozilla Firefox (that I use myself), we can view the title of the page near the upper border of the window .

Having any difficulties? Feel free to use the comment box.

Saturday, February 15, 2014

How to add adsense inside your Blog header Blogger

Some of you have noticed that many blogs have AdSense Units or other ads and widgets in the header section of the blog, one of the most popular format being the AdSense 468x60 ad unit.



Unfortunately, we are not always able to add a widget inside the blogger header as a Blogspot user. The reason is that if we are using the Blogger default template, or any other customized template available on the internet, the header may be locked and have no option to Add a gadget inside it or just next to the blog title.

The reason why some bloggers are using AdSense ads or different widgets in a blog header is because of its maximum of number of impressions. For instance, when a visitor goes to a page, this will be the first place where he would give a first look and this makes it one of the hottest spots in our blog.
But how we can add something inside blogger header - be it a Adsense unit, a search bar, social sharing buttons, or a widget? By simply adding a section in the blog's header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

Important! 
Before anything, we need to make a back-up of our Blogger template so that if we do make any major errors, we can easily restore the original working template to our blog.

To make a back-up, go to Template and on the right side - click on the "Backup/Restore" button.


Clicking on this button, will prompt you to save your existing template as an XML file to your hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later.


Resize blogger header


Step 1. Go to Blogger Dashboard, click on Template Edit HTML

Step 2. Click anywhere inside the code area and open the search box by using the CTRL + F keys:

adsense, blogger tricks, blogger widgets

Step 3. Add this code inside the search box, then hit Enter to find it:
 <b:section class='header' id='header' maxwidgets=
Note: If you can't find it, make sure that you have no space at the beginning of it.

Step 4. Replace class='header' with class='header header-left'.

Step 5. Now we need to find - CTRL + F - the following line of code:
 <div class='header-cap-bottom cap-bottom'>
And just above this line, we should see two div tags:
 </div>
</div>
<div class='header-cap-bottom cap-bottom'>
Step 6. Paste the HTML code below just above these div tags:
 <div style='clear:both;'/>

Now, let's go one step forward and add an extra gadget section within our Blogger header!

Add a new gadget/widget element to the Blogger Header


Step 7. Just above <div style='clear:both;'/> (step 6)... add this code:
 <b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
Step 8. Now find this tag:

    </head>

Step 9. Just above the </head> tag, add this CSS styling:
 <style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>
Note: if your widget is wider than overall area that both elements should occupy, then you might need to add the margin-right property to move it more on the right - see this example:
 <style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px; 
}
</style>
Step 10. Press the Save Template button to save the changes.

Step 11. Go to Layout of your blogger blog and you should see two gadgets on the header area.
You don't have to worry if the Add a Gadget element doesn't appear side by side as every blogger template is different. They might be slightly up or down or sometimes they might overlap each other. Just make sure that you drag the newly created widget just below the Header section.

widgets for blogger, blogger tricks

As I mentioned before, the header section could be one of the most valuable places in a blog. In that gadget/widget you can add anything like Adsense ads, search boxes, social sharing buttons, or you could, as well, sell that space for advertisement to boost your income.