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

Friday, March 30, 2012

Numbered Page Navigation for Blogger

You may have often wondered how many of those Blogger hosted blogs have numbered page navigation below the posts on home page. Its a nice little hack, but has a good effect. There's no doubt about the fact that such navigation links make a blog look way more professional, as well as user friendly.

Today I will show you how exactly you can implement that on your own blog.

As you know, by default, Blogger hosted blogs have those not so useful "Older posts" and "Newer Posts" links at the bottom. These can be useful, but only if the visitors know about them. While the fact is that most don't. So lets give them a better option, shall we?

Okay so first backup your blog template before starting anything.

Steps to follow:

1. Sign into your Blogger account.
2. In the Dashboard, select the blog, and go to » Settings » Posts and comments.
3. Set the maximum number of posts you want to display on homepage using the "
Show at most" option.
4. Now go to Template and click "Edit HTML"
5. When you get the whole code of your template, find this at the bottom:
</body>
6. Now paste this whole code just before the above tag.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

//]]>

</script>
</b:if>
</b:if>
7. See the part highlighted in red in the above code? That determines the number of posts to be displayed per page. Set it to be equal to the number you set in Step 3.
8. Find (using Control + F) all the occurrences of this code in your template:

'data:label.url'
and replace them with this:
'data:label.url + &quot;?&amp;max-results=5&quot;'
Once again, the number highlighted in red should be the same as in step 3.

So now the basic thing is done and by default it should look like this:


Now lets do the styling part of the navigation links.

Fine this code in your template:
]]></b:skin>
 Paste the following code just before the above code:
.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;

}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Now its all done. Save your template. See if everything worked as desired.

Friday, March 30, 2012 by Nilayan Ghosh · 1

Sunday, June 5, 2011

Related Post Widgets for Blogger/Blogspot Blogs

One of the most important features that is almost a must have for every blog is the Related Posts feature/plugin. Why is it necessary you may wonder. I tell you, when I say its a must have, its really a must have.

It makes your blog a lot more user friendly. When a visitor is looking for a particular topic, he/she gets a nice list of other posts related to the topic. This way your visitors spend more time on your blog, and that's what you want, right?

Another reason for adding Related Posts widget is Search Engine Optimization. Related Posts in a way means lots of internal linking within the site, which makes the search engine crawlers crawl more number of pages, hence helping your blog's SEO.

But one huge problem is that most bloggers are not good with codes. So its not so easy for them to edit the HTML and add the appropriate codes for Related posts list to work. So in this article, I'm going to list few very nice Related Posts plugins that will take hardly few minutes to install, and no coding knowledge is required at all.

There are quite a few Related Post plugins, but I will list only a few, that are popular and stable.

1. LinkWithin: It appears at the botton of each post in the form of thumbnails.


Pros: It is free, supports thumbnails, no registration is required to use this plugin.
Cons: Adds a LinkWithin credit below the thumbnails.


2. Outbrain: It looks similar to LinkWithin, and comes with an optional Post Rating feature.



Pros: It is free, supports both text and thumbnails, no registration is required to use this plugin. Moreover the added Post Rating system supports both star ratings and thumb recommendations.
Cons: Couldn't find any.

But all these third party plugins have a common issue, they can make your blog load slow, the reason being the fact that they use their own servers and all scripts are installed there, not in our blogger blog.

Sunday, June 5, 2011 by Nilayan Ghosh · 3

Friday, June 3, 2011

How to Make Blogger Blogroll Links "nofollow"

This is very important if you consider about your site SEO.Adding the nofollow attribute to your blogroll, would nullify any link juice with Google.If you like to add Nofollow attribute to your blogspot blogroll simply follow the steps below:

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to till you see your Blogroll widget code :

(Note : You may also can find it by searching <b:widget id='BlogList )

Your Blogroll widget code will look like this:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
   <div id='blog-list-title'>
     <h2 class='title'><data:title/></h2>
   </div>
 </b:if>

 <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
     <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
       <b:loop values='data:items' var='item'>
         <li expr:style='data:item.displayStyle'>
           <div class='blog-icon'>
             <b:if cond='data:showIcon == &quot;true&quot;'>
               <input expr:value='data:item.blogIconUrl' type='hidden'/>
             </b:if>
           </div>
           <div class='blog-content'>
             <div class='blog-title'>
               <a expr:href='data:item.blogUrl' target='_blank'>
                 <data:item.blogTitle/></a>
             </div>
             <div class='item-content'>
               <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                 <b:if cond='data:item.itemThumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:item.blogUrl' target='_blank'>
                       <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                     </a>
                   </div>
                 </b:if>
               </b:if>
               <b:if cond='data:showItemTitle == &quot;true&quot;'>
                 <span class='item-title'>
                   <b:if cond='data:item.itemUrl != &quot;&quot;'>
                     <a expr:href='data:item.itemUrl' target='_blank'>
                       <data:item.itemTitle/></a>
                   <b:else/>
                     <data:item.itemTitle/>
                   </b:if>
                 </span>
               </b:if>
               <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                 <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   -
                 </b:if>
                 <span class='item-snippet'>
                   <data:item.itemSnippet/>
                 </span>
               </b:if>
               <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                 <div class='item-time'>
                   <data:item.timePeriodSinceLastUpdate/>
                 </div>
               </b:if>
             </div>
           </div>
           <div style='clear: both;'/>
         </li>
       </b:loop>
     </ul>

     <b:if cond='data:numItemsToShow != 0'>
       <b:if cond='data:totalItems &gt; data:numItemsToShow'>
         <div class='show-option'>
           <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
           </span>
           <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
           </span>
         </div>
       </b:if>
     </b:if>

     <b:include name='quickedit'/>
   </div>
 </div>
</b:includable>
</b:widget>

4.Now add rel='nofollow' to your blogroll widget code as the example below:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>

<div class='widget-content'>
  <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <li expr:style='data:item.displayStyle'>
          <div class='blog-icon'>
            <b:if cond='data:showIcon == &quot;true&quot;'>
              <input expr:value='data:item.blogIconUrl' type='hidden'/>
            </b:if>
          </div>
          <div class='blog-content'>
            <div class='blog-title'>
              <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                <data:item.blogTitle/></a>
            </div>
            <div class='item-content'>
              <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                <b:if cond='data:item.itemThumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                      <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                    </a>
                  </div>
                </b:if>
              </b:if>
              <b:if cond='data:showItemTitle == &quot;true&quot;'>
                <span class='item-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                    <a expr:href='data:item.itemUrl' rel='nofollow' target='_blank'>
                      <data:item.itemTitle/></a>
                  <b:else/>
                    <data:item.itemTitle/>
                  </b:if>
                </span>
              </b:if>
              <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                  -
                </b:if>
                <span class='item-snippet'>
                  <data:item.itemSnippet/>
                </span>
              </b:if>
              <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                <div class='item-time'>
                  <data:item.timePeriodSinceLastUpdate/>
                </div>
              </b:if>
            </div>
          </div>
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
      <b:if cond='data:totalItems &gt; data:numItemsToShow'>
        <div class='show-option'>
          <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
          </span>
          <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
          </span>
        </div>
      </b:if>
    </b:if>

    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

5.Now save your template and you are done.

Friday, June 3, 2011 by Nilayan Ghosh · 0

Monday, May 9, 2011

How to Add jQuery Scroll To Top Button in Blogger/Blogspot Blogs

Steps to add jQuery Scroll To Top Button to Blogger:

1. Login to Blogger.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem

4. Find this code within the blogger template code(using CTRL+F):

</head>

5. Paste the following code just before the above line.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>

6. Find this code within the blogger template code(using CTRL+F):

<body>

7. Replace the above tag with the below one.

<body id='top'>


8. Find this code within the blogger template code(using CTRL+F):

</body>

9. Paste the following code just before the above line.

div id='goingtop'>
<a href='#top' title='Go Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKHjpXY2tXBsHCEr5JUv7epmTm4ZKNvkCgoOxCreUGd1_Oz6r25E1yQ3ykdPtApK61h1hGNWGeQxU72HU2ZYwurivFGjPqkYCITA23eY9e1DLJTV9ot_OTUkuhTgG1H8PgW94cThtaSSr/' style='right:20px; bottom:20px; position: fixed;'/></a></div>

You can use any other image in place of the above one(in bold).

10. Click on Save Template. You're done.

Monday, May 9, 2011 by Nilayan Ghosh · 0

How to Add Meta Tags to Blogger/Blogspot Blog's Individual Posts(Dynamic Meta Tags)

This trick will add different Meta Tags individual posts of Blogger blog.

Steps to Add Meta Tags to a Blogger/Blogspot Blog's Individual Posts:

1. Login to Blogger.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem.

4. Check the Expand Widget Templates box.

5. Find this code within the blogger template code(using CTRL+F):

<title><data:blog.pageTitle/></title>

6. Paste the following code immediately below the above line.

<b:if cond='data:blog.url == "URL OF YOUR POST"'>
<meta content='KEYWORDS RElATED TO THE POST' name='keywords'/>
<meta content='A SHORT DESCRIPTION OF THE POST CONTENT' name='description'/>
</b:if>

7. If you are using Blogger Home Page Meta Tags hack, then put the above code under the home page meta tag code.

7. Enter the keywords of your post between the single quote marks under keywords. Separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

8. Enter your post description between the single quote marks under description. Around 130- 150 characters should be optimal.


9. Click on Save Template. You're done.

by Nilayan Ghosh · 3

How to Add Meta Tags to Blogger/Blogspot Blog's Home Page

This trick will add Meta Tags only to the Home page of your Blogger blog, not to any other page.

Steps to Add Meta Tags to a Blogger/Blogspot Blog Home Page:

1. Login to Blogger.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem.

4. Check the Expand Widget Templates box.

5. Find this code within the blogger template code(using CTRL+F):

<title><data:blog.pageTitle/></title>

6. Paste the following code immediately below the above line.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='PUT YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='PUT YOUR BLOG KEYWORDS HERE(SEPARATED BY COMMAS)'
name='keywords'/>
<meta content='PUT AUTHOR NAME HERE' name='author'/>
</b:if>

7. Enter your blog description between the single quote marks under description. Around 130- 150 characters should be optimal.

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

9. Click on Save Template. You're done.

by Nilayan Ghosh · 0

How to Add Meta Tags to Blogger/Blogspot Blogs (Same Meta Tags for the Entire Blog))

This trick will add Meta Tags to all pages of a blogger blog. But its not very recommended as it will add the same meta tags to all pages of the blog. If you want to add a particular meta tag to the home page only, check Blogger Home Page Meta Tags hack. If you want to add separate meta tags to individual posts of your blog, check Blogger Individual Post Meta Tags hack.

But if you don't want to add separate meta tags to different pages, continue reading.

Steps to Add Meta Tags to a Blogger/Blogspot Blog:

1. Login to Blogger.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem.

4. Check the Expand Widget Templates box.

5. Find this code within the blogger template code(using CTRL+F):


<title><data:blog.pageTitle/></title>

6. Paste the following code immediately below the above line.


<meta content='PUT YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='PUT YOUR BLOG KEYWORDS HERE(SEPARATED BY COMMAS)'
name='keywords'/>
<meta content='PUT AUTHOR NAME HERE' name='author'/>

7. Enter your blog description between the single quote marks under description. Around 130- 150 characters should be optimal.

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

9. Click on Save Template. You're done.

by Nilayan Ghosh · 2

Thursday, May 5, 2011

How to Create Search Engine Friendly Permalinks for Blogger Posts (Blogger SEO)

What is Permalink?

According to Wikipedia, a permalink, or permanent link, is a URL that points to a specific blog or forum entry after it has passed from the front page to the archives.

As you publish a post in a Blogger blog, a permalink is auto generated based on post title.

Permalinks are extremely important when it comes to search engines. Search engines index Blogger posts using their permalinks. These permalinks are used by search engines to categorize your posts.

But Blogger blogs have few disadvantages when it comes to permalinks.
  1. Once you publish a post in Blogger blog, its permalink becomes unchangeable. You can't alter it later on like you can do it in case of Wordpress.
  2. Blogger takes only like first 35-50 characters of you blogger post to generate the permalink. So if you have a long post title, you may miss out few words in the permalink. So extra care has to be tken while forming the title of a post.

Now as almost always, there's a way around. The trick is to publish the post first and then again republish it.

Steps to generate friendly permalinks:
  
  1. While publishing your post the first time, create a shorter title, around 35 characters long, that adequately summarises the content of the post, and publish the post.
  2. Now edit the same post and replace the shorter title with your preferred longer one. And publish the post again.

Doing this, the permalink will remain the same summarised one that got generated when the post was published the first time, but the post title will now be the one you added while republishing the post.

Now this trick is both reader friendly and search engine friendly. Bloggers can use this trick to remove unnecessary words from post permalinks, as often words like "the", "of", etc can make a post title too long causing important keywords getting eliminated in permalinks. Also doing this helps your blog's SEO, as search engines will index the permalinks with rich keywords.

Thursday, May 5, 2011 by Nilayan Ghosh · 3

Wednesday, May 4, 2011

Change Blogger Title Tags to Improve SEO

This tutorial explains how to improve Search Engine Optimization (SEO) of your Blogger blog by optimizing your post title tags for search engines like Google, Yahoo and Bing. How to improve search engine results by optimizing post title tags.

By default, Blogger is not quite search engine friendly, but with easy tricks, you can make it good enough for search engines to rank them in good positions.

By default, Blogger blogs don't have search engine friendly title tags, while many blogging platforms have inbuilt or enhanced SEO plugins which give them a slight advantage compared to Blogger blogs.

Search engines give more importance to the first words of the title of a webpage. But in Blogger blogs, the title is ordered by the blog name followed by the post title, like this, Blog name: Post title.


Now this can highly hamper you site's SEO as many a times the main keywords in your post title won't even get indexed by search engines if its too long.

Fortunately, a small tweak comes to the rescue in this situation. All you have to do is to reorder your blog name and page title sequence from the template. It will make it look like this, Post title: Blog name.

Follow these simple steps and you are done:

1. Login to your Blogger blog.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem.

4. Check the Expand Widget Templates box.

5. Find this code within the blogger template code(using CTRL+F):

   <title><data:blog.pageTitle/></title>
  
   Replace it with this code:

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

6. Click on Save Template. You are done.
 

To check the effect, go to your blog and click on an individual post link. You will notice that your post title is now followed by blog name.

   If you experience any error, you may try replacing    

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   with

   <b:if cond='data:blog.pageType == "item"'>

This tweak is surely going to help your search engine ranking for your preferred keywords. And this is almost a must if you want to drive significant organic traffic to your blog.

So here you have just learnt how to optimize your Blogger blog's title tags to improve its Search Engine Optimization(SEO) to improve search engine ranking and increase its organic traffic.

If you have any question, feel free to post a comment and I will try my best to solve your query.

Thank you for reading.

Wednesday, May 4, 2011 by Nilayan Ghosh · 3

Sponsored by Capslocker