Country Specific BlogSpot URLs

Blogger has started using Country Specific URLs and some of you might have already noticed it. The change has been rolled out in India.If you are from India try visiting any BlogSpot URL and you will be redirected to the country code Top Level Domain (ccTLD). For example if you visit any page on http://bloggerindraft.blogspot.com from India , you will be redirected to the country specific page on http://bloggerindraft.blogspot.in . Similarly if you visit any other ccTLDs  from India, you will be redirected to the Indian TLD.

eg: http://bloggerindraft.blogspot.com.au (Australian TLD)  will redirect to the Indian TLD .

Blogger has made a help page entry describing why they have made this change. You can read that at Blogger Help As per the article the change might soon be rolled out to other countries as well.

Why This Change?

This change was specifically made to enable country wise censorship.

“By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers. Content removed due to a specific country’s law will only be removed from the relevant ccTLD.”

Who is affected by this Change?

Everyone Blogger user who doesn’t have a custom domain name(but has readers across the globe)  irrespective of the country you are from is affected by this change. Right now it seems like the change has been rolled out only in India. So when an Indian user visits your blog, he will be redirected to the .in TLD. using a 302 redirect.

What should I do Now ?

The first thing that you have to do is to make sure that you are using Canonical tag on your blog Pages. This should be there by default in all templates unless you hacked the template and removed some code from there.

Make sure that the following line is there in your Blog Template

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

This tag will render the canonical tag for you.

If you don’t want to add this tag for some reason, then you can use the following tag in the template’s head section.

<link expr:href="data:blog.canonicalUrl" rel="canonical"/>

data:blog.canonicalUrl will give you the actual canonical URL(blogspot.com ).

What does the Canonical Tag do ?

The Canonical tag specifies the actual location of the page. Even if you are viewing a blogspot.in page, the canonical tag will let the search engines know where the actual page is located(the blogspot.com version)

If you don’t have the canonical tag on your pages, you might get into trouble on search engines which might index different country specific pages of your Blog. Your Social Counters(Facebook Like Button, Google Plus One button etc)  will show the wrong count and will allow users to share different country specific versions of your Page. Adding the Canonical tag will ensure that the same blogspot.com page gets shared on social networks and so the counters will display the same count irrespective of the country the visitor is from.

Custom Domain Blogs like mine will not be affected by this change.

Dynamic View Templates

Dynamic View Templates doesn’t render  the canonical tag(when I’m writing this post). Hence non-custom domain blogs which use Dynamic View Templates will face the issues that I have mentioned above. I have reported this to the Blogger guys and hope this will soon be resolved.

Update :- Blogger has now addressed this issue and now the canonical tags  have been added to Dynamic View Templates as well.

 

No Country Redirect (NCR)

If you want to temporarily  prevent Blogger from doing a country specific redirect while viewing a blogspot blog, then you can use the NCR option.

Examples : http://bloggerindraft.blogspot.com/ncr will give you the .com version without redirecting to your ccTLD

http://bloggerindraft.blogspot.com.au/ncr will give the australian ccTLD without redirecting to your ccTLD

Google Plus One and Facebook Like Buttons

The first reaction that I heard on Social Media Sites is about the Social Counters. This change won’t affect your counters. When a page gets shared on Facebook, FB always shares the Canonical URL. So you don’t have to worry about the FB counters. Google Plus will allow you to share non-canonical URLs, but since G+ doesn’t have any counter based on number of shares, this won’t be an issue.  The Facebook Like Buttons or the Google +1  Buttons will always use the Canonical URL, so counters won’t have a problem with this update(provided you have the canonical tag)

Update (1/2/2012): Since most of the Social Counters were not configured to use Canonical URLs, they might show wrong counts. All template tweak posts here on this blog has now been updated to use Canonical URLs. If you are using the data:post.url variable in any of the social plugins, then you will have to replace it with data:post.canonicalUrl. If you are using data:blog.url anywhere for social plugins, then you will have to replace it with data:blog.canonicalUrl . You might get some idea if you check out the updated posts here on this blog.

Source: http://www.bloggerplugins.org/2012/02/country-specific-blogspot-urls.html

Gadgets for Blogger Dynamic Views

Blogger has introduced 6 awesome Gadgets for the Dynamic Views/Dynamic View Templates. The Widgets appear as a Floating Dock and expands when the user hovers over it.  These Gadgets matches up with the look and feel of the CSS3 powered Dynamic Views.

 

These are the list of Gadgets that Blogger has added to Dynamic Views

1. Blog Archive
2. Followers
3. Labels
4. Profile
5. Link List
6. Subscribe

You would already be familiar with the first 5 gadgets, but these are pretty different from the normal Gadgets. These are interactive and open up when the user hovers over the dock thereby saving some valuable space. The last gadget in the list(Subscribe) is a new Dynamic View Gadget which would be shown if you have added the Follow by Email or Subscription Gadget.

How to add these Gadgets to Dynamic Views ?

You just have to go to the Layout Page and add these Gadgets as you normally do. The docked gadgets will appear on your Dynamic view template or on your Blog’s Dynamic View .

I’m not using a Dynamic View Template, but you can see the new Gadgets in action on my Blog’s Dynamic View Pages. You can check out the demo at

http://www.bloggerplugins.org/view

If you want to see how these would look like on your blog. just append view to your blog’s main URL.

e.g : http://www.bloggerplugins.org/view

If you are still new to Dynamic Views, do check out this video

Source: http://www.bloggerplugins.org/2012/03/gadgets-for-blogger-dynamic-views.html

Custom 404 Error Pages for Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page. Till now Blogger’s error page was a plain old design with more of orange in it and was not customizable. Now Blogger Error pages use the same template . This would help template designers in making up custom 404 Pages.This tutorial will help you in setting up a Custom 404 page for your Blog.

By Default, your Blogger Error page will display this error message

You can Change this message to something else from the Blogger Settings.

The option is there at Settings > Search preferences > Custom Page not Found

If you want more than just a message, then we will have to fill up this text area with some HTML Code.. This is how my Error page Looks like

Instructions

1. Login to your Blogger account and go to the Template page and proceed to Edit HTML
2. Click on the Expand Widget Templates Check box so that your entire template comes up
3. Now Look for </head> and immediately before that paste this snippet

   <b:if cond='data:blog.pageType == "error_page"'>
   <style type="text/css">
   .status-msg-wrap {
       font-size: 100%;
       margin: none;
       position: static;
       width: 100%;
   }
   .status-msg-border {
       display:none
   }
   .status-msg-body {
       padding: none;
       position: static;
       text-align: inherit;
       width: 100%;
       z-index: auto;
   }
   .status-msg-wrap a {
       padding: none;
       text-decoration: inherit;
   }
   </style>
   </b:if>

   This code snippet will reset the default styling given to the Blogger Message Wrapper.
   
4. Save the template and go to a page on your blog which doesn’t exist.
   
5. You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
   
6. Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.

   <h3>Your requested page was not found</h3>
   <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
   Please check that the Web site address is spelled correctly.</p>
   <b>Other things to try:</b><br/>
   <ul>
   <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
   <li>
   <form method="get" action="/search">
   <table width="100%">
   <tr>
   <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
   <td><input type="button" Value="Search"></td>
   </tr>
   </table>
   </form>
   </li>
   </ul>

   
   
7. It will give you something similar to my 404 page.
   
8. If you are creative, you can add more stuff to the 404 pages. You can find a list of really creative 404 pages on HongKiat for inspiration

Detecting an Error Page

Blogger has introduced a new page type called "error_page" and you can detect it using b:if conditional tags.

The following condition checks if a page is an error page or not.

<b:if cond='data:blog.pageType == "error_page"'>
This is an Error Page
</b:if>

 

Changing the Error Page Title

By default the title of the Blogger Error Page is your Blog Title. If you want to change it to something else, you can Edit your template and change

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

to

<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

If you are using my Title Tag Hack or derivatives of that available on the internet, then you will have to change

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

to

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

 

As I always say, if you get into troubles, you can use the comment form , Forum or our Facebook Wall :)

I’m sure that this is the first tutorial on Blogger 404 Pages on the Internet. Do share and keep us live :D

Source: http://www.bloggerplugins.org/2012/03/custom-404-error-pages-for-blogger.html

Add Meta Description Tags to Blogger

Meta Tags are HTML elements used to provide structured metadata about a web page. Such tags are placed in the head section of an HTML document and Search Engines might use this data to display the search snippet when they display a page from your blog. Most of the Social Sharing Tools like the Facebook Share or the Google Plus buttons will pick up this meta description to create the snippet which gets shared to the Social Networks.

 

 

How to add Meta Description Tags

Blogger has rolled out an array of SEO features and now adding Meta Tags has become so easy. You can do it easily from the Blogger’s User Interface without doing much of Template Editing or pulling your hair. So here is how to do it

1. Go to Settings > Search Settings and Enable Meta Tags. In the Text area give a 150 character description which will describe your Blog. This text might be used by Search engines when your Blog’s home page is displayed on Search Engines. Here is the snippet that I have given “Blogger Widgets provides you the best quality blogger tutorials.It also provides you with free blogger widgets and  gadgets to build a better blog.”
   
   
   
   
2. Now when you make a Post, you can set the Meta Description from the Post Editor’s Post Settings  Sidebar.
   
   You can always edit the Search Description for existing posts as well
   
   
3. If you are having a custom template, make sure that the following line of code is present in your template. To do that go to Template and Proceed to Edit HTML . Find

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

   If it's not present, add it just before </head>
   
   
4. That's It you have done it.

Source: http://www.bloggerplugins.org/2012/03/add-meta-description-tags-to-blogger.html

Redirect one page to another in Blogger

Blogger has launched an Array of Search Engine related features and one of them is the ability to create Custom Redirects. Technically Blogger allows you to create 302 Redirects which are used to specify that the Web Page has temporarily moved to a new location.

What is a redirect ?

A visitor coming to a particular web address is redirected to another web address. This process is called Redirect. Blogger allows you to create Internal Redirects which means that you will be able to redirect the user coming to a particular URL on your blog to another URL on your Blog.

When are Blogger Redirects Useful?

Consider a situation where a page on your Blog was really popular and later you decided to delete it for some reason. Since that page is popular, references to that URL might be there at multiple Blogs/Websites which linked to you. The users coming to that popular URL will now be greeted with a 404 Page not Found Error. You might be loosing some potential readers/subscribers here. One way of resolving this would be to redirect the guy to some other relevant page. This is exactly what Blogger’s Custom Redirects do.

You can also use the Blogger Redirection Tool to create short links. For example you might want to redirect yourblog.blogspot.com/yourname to  your contact page. You can do that easily using the Blogger’s Redirect Tool.

How to add Redirects?

I will describe this using an Example. I had a post about Meta Tags on my Blog. This entry was made some 4 years back  and when Blogger launched the new Search Options, it became irrelevant. So I just deleted that post and made a new entry in my Blog with the new details. Now the visitors coming to that 4 year old URL from various sources would be greeted with a 404 error. I don’t want that to happen but I need that user to be sent to my new Blog Post.

1. To do a Redirect you should have 2 URLs. The first one is the URL which should be redirected to the target. The target is the second URL where the user should be redirected to.
   
   
2. The second thing that you have to do is to get the relative paths of these URLs.e.g.: The relative path to http://www.bloggerplugins.org/2008/06/meta-tags-for-blogger-blogspot.html is  /2008/06/meta-tags-for-blogger-blogspot.html . You might have already figured out that you should remove your Blog’s home page URL from the URL to get the relative path. You should also make sure that the Relative path starts with a slash (/)
   
   
3. Similarly you have to figure out the relative path to the Target URL. I opted for /2012/03/add-meta-description-tags-to-blogger.html
   
   
4. Once you have got these 2 Relative paths, you can do the Redirect at Settings > Search Preferences > Errors & Redirects > Custom Redirects Add the From and To Fields there and click on the Save link and then on the Save Settings Button
   
   
5. You can add more Redirects in a similar way.

Demo

Check out the following URLs and see how these get redirected

1. A Post which is no longer there http://www.bloggerplugins.org/2008/06/meta-tags-for-blogger-blogspot.html
   
   
2. A Custom Short URL that I made http://www.bloggerplugins.org/contact

Both of these URLs will get redirected to a different page instead of showing a 404 Page.

Source: http://www.bloggerplugins.org/2012/03/redirect-one-page-to-another-in-blogger.html

Incredible perspectives for your blogger blog

Blogger has just launched a set of incredible perspective views which can turn your blogs into stunning examples of CSS3 and HTML5 Technologies.

Checkout the following perspective views of BloggerPlugins :..

• FlipCard
  
  
• Mosaic
  
  
• Sidebar
  
  
• SnapShot
  
  
• TimeSlide

Also check out this awesome video by the blogger team!!

Check out these Screenshots as well :)

1. Flip Card

2.Mosaic

3. Sidebar

4.Snapshot

5.Time Slide

Loved it, and can’t wait to see your blog in these perspectives? Go ahead, fill this form,click the generate links button and get the links to view your blog in these dynamic views.

Checkout the below links after typing in your Blog url in the above text box.

Your Blog's FlipCard View

Your Blog's Mosaic View

Your Blog's Sidebar View

Your Blog's SnapShot View

Your Blog's TimeSlide View

Or you can enter your blog url into the text area on any blogger dynamic view page (see the image below),load the blog,  and use the switcher to switch across various views  v

Alternatively, you can simply add “/view” to the end of the blog URL to see the new set of views. Eg: http://www.bloggerplugins.org/view

If you are using Google Chrome, then you can install this extension to see the Dynamic views of any blogger blog with ease.: (https://chrome.google.com/extensions/detail/mmoheajlpfaigefceljflpohdehkjbli

Source: http://www.bloggerplugins.org/2011/04/incredible-perspectives-for-your.html

Facebook send button for Blogger

It had been some time since Facebook released their new Send Button.The Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual. Follow this tutorial to add it to your Blogger Blog.

Configure how your Send button should look like, using the options below, and then continue following the instructions in this tutorial.

Color Scheme	LightDark
Font	arial lucida grandesegoe ui tahoma trebuchet ms verdana
Float	None LeftRight
Location of the Button	Below the Post Content Above the Post Content
Display	On Post pages only EverywhereEverywhere other than Static Pages

Demo

1. Login to your Blogger Dashboard, and navigate to Design > Edit HTML.

2. Click on the checkbox  which says “Expand Widget Templates”

3.  Look for <data:post.body/> and immediately below that paste the following code.

<div>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:send expr:href="data:post.canonicalUrl" font="arial" colorscheme="light"></fb:send>
</div>

5.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

6. Save your template, and now you should have the send button working on your  blog.

Hmmmm I want something more than the plain send button!!

In that case, you can use the Facebook like button which can accommodate a send  button along with it. To know more about the usage, refer the following post.

1. Facebook Like + Send Button for Blogger

Source: http://www.bloggerplugins.org/2011/05/facebook-send-button-for-blogger.html