Simple Blogger Tutorials

Blogger Updates: Redirecting URL and Threaded Comments

2012-02-04T00:11:00.000+05:30

This post is written to inform you about Blogger blogs redirecting to country specific URLs, what you should do and updates to threaded commenting of Blogger.

Blogger Redirecting URL

Many of you have found out that Blogspot blogs are redirecting its top level domain to country specific URL, also known as “ccTLD”. You can read it in detail in Blogger Help, here I’ll let you know the jest.

So what is top level domain?

In short, suppose you blog at example.blogspot.com. So your top level domain is com. What Blogger is doing is that they are redirecting this top level domain to “country code” specific URL. So if you are reading this blog in US it will be example.blogspot.com, if you are from Australia, it might get redirected to example.blogspot.com.au and if you are from India it will get redirected to example.blogspot.in. However, I came to know that it is for India only but Blogger Help page is also giving signs that it might come into effect to other countries too.

Why such a drastic change?

The main reason I think “providing greater flexibility in complying with valid removal requests pursuant to local law”. Suppose you are from India and published a post that does not complies with Indian law. So your readers from India will not be able to see it while readers outside India, such as, readers from US or Australia will be able to see it.

How to stop this Blogger URL redirect?

Sadly, it’s not possible if you are blogging using Blogger. It’s a global change and there are no permanent ways except of having a custom domain. However, if you are the reader then you can stop this redirection by adding /ncr at the end of the URL like this:

http://example.blogspot.com/ncr

This “NCR” stands for “No Country Redirect”.

Any SEO impact?

After the introduction of rel='canonical' (which tells the search engines that though URLs are different, the content is same) Blogger engineers implemented it for us. So you need not to worry about it if you have <b:include data='blog' name='all-head-content'/>. This can be found under opening head tag while you are editing your template from Edit HTML. If it’s not there then add the below code just after <head> tag.

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

Who remains unaffected?

Only those who have custom domain set up with Blogger, remains unaffected.

What you should do immediately?

If you have added any kind of sharing buttons, update it immediately. I have updated many posts. I will tell you why and explain it in my next post.

Blogger Threaded Commenting

Blogger engineers updated the threaded comments in Blogger. Some common problems which got fixed are:

Seeing a blank page in Internet Explorer
Reply button not working in Google Chrome
Page jumps to bottom in Firefox

Previously I wrote that changing defer attribute to async fixes Blogger threaded commenting for first two problems. Now I find that it’s defaulting to async. So you all can turn it on safely. If it’s not working on your blog even if you have done every settings then try enabling threaded comments manually.

Blogger Threaded Comments Internet Explorer and Chrome Fix

2012-01-15T01:12:00.000+05:30

It seems that many of you who have enabled Blogger’s Threaded Comments are having problems to view your blog mainly in IE (Internet Explorer) and Chrome (by Google). Problems such as, you are viewing a blank page even if your blog loads or the page freezes in IE and/or the Reply function not working in Chrome. These two things are common and can be fixed for the time being.

The work around

At first, make a backup of your template if anything goes wrong.

Previously I wrote about adding threaded comments to Blogger for customized templates. Like that, while editing your template form Template > Edit HTML option check “Expand Widget Templates” and find:

<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

Replace it with:

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

Save your template and view your blog if the problems are solved.

How does it work?

The defer attribute tells the browser to run the script after the page has been loaded. By somehow this attribute was (better say may be) causing these problems where either you are seeing a blank page or the page freezes or the problem with the Reply link. Just deleting this attribute could have done and it may have looked like:

<script expr:src='data:post.commentSrc' type='text/javascript'/>

While async tells to execute the script asynchronously along with the page, so I added this attribute so that it doesn’t block the page while loading.

Note

Though it seems that after this fix, Blogger’s threaded comments are working in Internet Explorer 9 but in previous versions like IE8 or IE7 there still exits a little problem with some templates, that is, the reply button doesn’t opens the comment box just below it when clicked. Instead, it will remain fixed at the bottom just like the previous comment form, but still you can reply. While in Google Chrome, it also fixes the problem with the reply link where it was not opening the comment box and has been confirmed here by Chee. But still check if your browser is up to date.

Remember, this is a work around only and I can’t guarantee you that it should always work. Along with you I am also waiting for a proper fix by Blogger engineers.

Enable Threaded Commenting on Blogger Templates - Problem Fixed

2012-01-12T16:26:00.000+05:30

It came to my notice that even though you have enabled the proper settings, still many of you have failed to install/see/have the threaded comments and it’s not working on your Blogger template. This is mainly happening to those who have customized their templates or have downloaded it from other sites. Well, I think I have got what it needs to get it back.

Fix to Get back Threaded Commenting System for Blogger

First backup your template and then follow any one of the options below.

Option 1 (Recommended)

While editing your template from Edit HTML option, tick “Expand Widget Templates”. Now find <b:include data='post' name='post'/> and just below it find these snippets:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

Replace it with:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>

Save your template and check whether threaded comments are working on your template or not.

Option 2

Sometimes it’s possible that you are not able to find the proper codes and/or not able to implement properly as told above. So here’s another solution to find out whether it will work or not, so find:

<b:include data='post' name='post'/>

And below it add:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  </b:if>
</b:if>

Save your template and check whether it’s enabled or not. If you find that its working but showing both the comment systems, then delete these codes and follow option 1 (you need to find the proper codes to let it work properly).

Option 3

If you still didn’t got a proper working threaded comments and if you have customized your templates a little (did some small changes) then you can safely “Revert widget templates to default”. This option can be found under Template > Edit HTML (for old interface, it’s under Design > Edit HTML tab) while you are editing your template.

Warning! Though it’s the easiest way and the design of your blog may (may not) change, still you can face several problems. For example, if you have added a beautiful floating sharing buttons or did some heavy customizations, then this option may (may not) disabled and alter your customized template. So, to be on safe side, setup a test blog, upload your template, make a new post, leave some comments and then apply this method.

If you have got threaded comments working, then don’t forget to leave a reply and tell your friends too by sharing this post.

P.S. This post has been rewritten.

Blogger enabled Threaded Commenting for us!

2012-01-12T14:44:00.000+05:30

You may have seen this in WordPress blogs, now Blogger also has this too, it’s threaded commenting. Blogger has introduced a new improved commenting system for us. So what’s that actually? Well, now it’s possible to reply on an existing comment to start a conversation. It will be displayed as threaded (or nested). See an image example below:

Image from Blogger Buzz

To enable threaded comment for your Blogger template you need to apply some settings and you are ready to go. For Blogger new interface, go to your blog’s “Settings > Posts and comments” and from Comment Location dropdown select Embedded. If you are using Blogger’s old interface then go to “Settings > Comments” tab and select Embedded below post for Comment Form Placement. Save your settings.

Comments Setting

It’s not finished yet. Go to “Settings > Other” and select Full from the Allow Blog Feed dropdown. For old interface, go to “Settings > Site Feed” tab and do the same as told for new interface. Save your settings.

Blog Feed Setting

That’s it. Now, happy commenting! Images by Blogger Buzz.

Wish You Happy New Year - 2012

2011-12-31T22:30:00.000+05:30

I wish you all a Happy New Year...

Google Doodle for 2012!

So, what will be your New Year blogging Resolutions? Let's discuss by leaving a comment...

Add Open Graph Protocol Meta Tags to Blogger

2011-12-08T21:12:00.000+05:30

The Open Graph Protocol enables web pages to integrate into social graph. For example, if you include open graph tags, you will have the ability to treat your page same as Facebook Page. In addition, if you have added Plus One button to Blogger, it can also help you to get your +1ed page to be integrated in to the social graph of Google+.

To enable it you need to add <meta> tags. In this tutorial I will tell you how to add these Meta tags to Blogger so that Facebook, Google+ and other social networking sites can collect the structured information about your blog and post pages.

Before we start, let’s discuss about important Meta tags that can/should be included to Blogger.

og:title

<meta expr:content='data:blog.pageName' property='og:title'/>

Object Title, i.e., the title of the page or post.

og:type

<meta content='blog' property='og:type'/>

The type of object, i.e., it is for homepage and other pages expect blog post (item) and static pages, and:

<meta content='article' property='og:type'/>

Used for post and static pages only.

The type for the object should be used properly because it can create some problem.

og:url

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

The URL of the page the user is reading.

og:image

<meta content='http://www.your-blog-logo.jpg' property='og:image'/>

The image that should be used to represent the object. Many have asked that “I want to show my blog’s logo when people Like my post”. There are also some other problems, e.g., the image does not appears or the post image is not displayed correctly when the post is Liked. This tag solves these types of problems for Blogger.

Update (12/7/2011): Now it's possible to add Blogger post images to og:image. Thanks to alt.pathawks.com.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>

I did some changes to the original code so that if your blog posts or other pages do not contain any images, it will render a default image instead. Replace “http://www.your-blog-logo.jpg” with your blog’s logo image, which should be more than 50x50 pixels with maximum aspect ratio of 3:1 and should be in PNG, JPEG and GIF formats. The image generated from data:blog.postImageThumbnailUrl will be 72x72 pixels.

If you think that the Like button works perfectly and you want to show images as it is added to the post, then you don’t need to add this tag.

og:site_name

<meta content='Your Blog’s Name' property='og:site_name'/>

The title of your blog. You have to replace “Your Blog's Name” with the title of your blog.

og:description

<meta content='Description of the page' property='og:description'/>

It is for having a small description of the page. Currently, getting dynamic description on Blogger is not possible through correct method. I have tried it with data:post.snippet method but it doesn't work between head tags and is also very short. It's now becoming crucial to have dynamic description on Blogger. It's my request to Google Blogger developers to enable it for us.

Update (12/8/2011): I suddenly noticed <meta expr:content='data:blog.metaDescription' name='description'/> tag to the head section. It was not there in previous templates and didn’t find any documentation also. May be Blogger is bringing a good news for us!

fb:admins

<meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

This is optional. This is for Facebook Open Graph, you can choose whether to add this meta tag or not. You have to provide your Facebook profile ID in place of “Your-Facebook-Profile-ID”.

fb:app_id

<meta content='Your-App-ID' property='fb:app_id'/>

This is also optional as it is required if you have signed up for Facebook Apps. Replace “Your-App-ID” with the application ID given by Facebook.

How to Add Open Graph Meta Tags to Blogger

Step 1: Go to Blogger’s Dashboard > Layout > Design > Edit HTML tab.

Step 2: Find the HTML attribution marked in bold:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

After this add the Open Graph Protocol name namespace:

xmlns:og='http://ogp.me/ns#'

It will look like:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

If you have previously added the Facebook namespace as instructed in the tutorial for adding XFBML Facebook Like button to Blogger then the full attribution will look like:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>

Step 3: Find <head> and below it add the following META tags:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<meta content='Your-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

For advance use

It creates some controversy to when to use blog to property og:type because as told in Facebook, it should be used on the root of a domain and article should be used when it represents a news article, blog post, photo, video, etc. So the META tags that can be added (with caution):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<meta content='Your-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-profile-ID' property='fb:admins'/>

Step 4: Save your template.

To check if you have applied all the <meta> tags correctly to Blogger, visit Facebook Debugger for Developers.

More references:

For Developers

Contribute if anything is missing.

Syntax Highlighter for Blogger

2011-12-02T20:56:00.000+05:30

Today we will learn how to add syntax highlighter to Blogger. I will go with Google Prettify as adding it to Blogger (or any other CMS) is simple and easy.

Demo

So at first you have to download the script file from Google Prettify (reference also). Extract it using archive software like WinRAR or 7-Zip. Now within the extracted folder find for prettify.js and prettify.css files and upload these to your hosting service.

Step 1: Blogger don’t allow us to host files directly so if you have got a hosting service then its good, otherwise you can use Google code to host prettify for you. Go to code.google.com/hosting/createProject, login using your Google ID, create a project and upload your files. If you are too lazy then you can use the below script sources from the project itself.

Step 2: Go to Blogger’s dashboard > Template > Edit HTML and add the syntax highlighter script before closing </body> tag.

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

Step 3: You need to add the CSS file. You can add it directly just before ]]></b:skin> by viewing the raw data from the downloaded file or from the project, or you can add your hosted file or from the project (as shown below) just after ]]></b:skin>

<link rel="stylesheet" href=" http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"/>

If you need more styles then you can get the style sheets form prettify themes gallery.

Step 4: Add prettyPrint() to call and execute it. As suggested in the documentation, you can add onload='prettyPrint()' to your opening body tag like the example below:

<body onload="prettyPrint()">

Or you can add it just before closing body tag as the example below (reference: Syntax Highlighting to any project - Nettuts+):

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>prettyPrint();</script>
</body>

Use any one of the methods in step 4. If you think that the onload method is blocking your page (like I did with my AdSense ads) use the second method. It works perfectly.

Step 5: It is the last step. The syntax highlighter will search either for pre or code tags with a class prettyprint. So whenever you are writing/posting codes or snippets, format it like this:

<pre class="prettyprint">
$(document).ready(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre>

Note: Projects hosted on Google Codes are open source and the owners have some rights to add a license to it. However, I didn’t find any documentation that is not permitting to use the direct sources from the Prettify Syntax Highlighter project but it will be best if you host it elsewhere so that if the direct links changes or gets deleted, it won’t affect you.

Create Google+ Page for Your Blog

2011-11-09T21:41:00.000+05:30

Google+ (Google Plus) finally rolled out Pages to connect you with others. Whether you are a brand or have a business or just blogging, you can create a fan Page on Google+ for people who love you. People can not only add your Page to their circles but also can recommend and start hanging out with you.

Same as Facebook fan Page, creating a fan Page on Google+ for your blog is also easy. It takes only three steps to create one after signing in to plus.google.com/pages/create. Check out below images.

Start creating a Page

Customize the profile

Finish your Page Setup

Final Google+ Page

After setting up the fan page don’t forget to add an introduction under the About tab to let people know what’s this page is about.

To toggle between and manage your pages, you can find the option from the dropdown menu under your profile picture. From here you will be also able to delete the Page created on Google+.

Manage/Delete Page

Get Your Blog Ready for Google+ Direct Connect

Google+ pages are also available on search results. For example, if you search for “+Angry Birds” on Google.com, it will directly take you to that page. Learn more by this video:

You can get this feature for your page also but you need to add rel="publisher" tag (however, it's not guarantied). For example if you adding a link to your blog so that your blog readers can reach your Google+ page then it should be:

<a rel="publisher" href="https://plus.google.com/[yourpageID]">Find us on Google+</a>

The best and recommended way is to add the link tag within <head> section.

<link rel="publisher" href="https://plus.google.com/[yourpageID]" />

To add it to Blogger, go to Dashboard > Template, click Edit HTML and find <head> tag. Below it add the above snippet.

Add a Google+ Badge

You can also grab a badge for your Google+ page to add to your site or blog. Just visit grab a snippet of code, add your Google+ Page ID and get the code. ~~Currently only icons are available but later badges will be introduced as promised by Google~~. You can also join and Circle me on Google+ by clicking the below icon:

Google+ Icon

You will get two sets of snippets (check the image below), first is the link tag (I already told you how to add Google+ link tag to Blogger, if you already added it, you don’t need to add it over again) and the second is the snippet to add on your blog’s sidebar or wherever you want.

Get Google+ Badge

Google+ Badge

Here you need to add it differently. As I told you in adding Plus One button for Blogger, the asynchronous script sometimes fails to load when it's not placed immediately before closing body tag (there could be several other reasons too). So I would recommend you to:

Step 1: Click the Advance option and untick Asynchronous option.

Step 2: Now edit your Blogger template, find </body> tag and before it add:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"><script/>

Step 4: Save your template.

Step 5: Copy the second line from the Google Plus configuration page and add it wherever you find it appropriate (for example, by adding a HTML/JavaScript gadget to your sidebar). Check the image below:

Google+ Configuration Page

What is Your Google+ Page ID

Go to the Home tab of your page (also known as Stream), click Get started link found under the left-hand menu, get you page ID under Tell the world section. Or simply, look at the address bar of your browser and get the ID from there.

Google+ Page ID (highlighted)

Reference: Official Google Blog: Google+ Pages

How to Add Google Analytics in Blogger - Full Tutorial

2011-11-03T00:52:00.002+05:30

Do you want to know about your blog and its visitors? Well, Google Analytics can help you. Today I will tell you in details how you can add Google Analytics to your blogs.

What is Google Analytics?

Google offers a service called Analytics which gives you an inside out of your website or blog’s traffic/visitors. It can help you to understand how people are reaching your site and exploring it by a more detailed statistics.

Blogger has recently introduced an easy way for you to add Google Analytics to Blogger blogs. But to enable this you need to do something extra to get Analytics to work for you. Let’s discuss that.

First you have to sign up for Analytics to work for you.

On the next page you can find some text areas (fields) which you have to fill up and accept the TOS.

Click to enlarge

1.1: Account name: More preferably it will be the Profile Name, such as, My blogs.
1.2: Website’s URL: Enter your site’s URL, example, example.blogspot.com or www.example.com
1.3: Time Zone: Your country’s time zone or your country only.
1.4: User Agreement: Read it and select Yes if you agree and click Continue.

Step 2: On next page you will be given the Web Property ID (1.5) and the Analytics script (1.6) under Tracking Code tab.

Click to enlarge

Note: Steps 1.5 and 1.6 are shown in the image.

Step 3: Log in to your Blogger’s Dashboard > Template tab and click Edit HTML.

Step 4: Here is the point where you have to decide by which method you would like to add the tracking code: the Analytics way or the Blogger Buzz way. I will explain both.

Method 1: The Analytics Way

4(a): Find closing </head> and immediately before it add the script code (1.6) found under Tracking Code > Standard tab.

4(b): Save your template. It’s done.

Method 2: The Blogger Way

4(a): Check the option “Expand Widget Templates” (as precaution).

4(b): Find for the below snippet:

<b:include name='google-analytics' data='blog'/>

If it’s there then follow from step 4(e) otherwise move on to step 4(c).

4(c): Find the closing </body> tag and before it add:

<b:include name='google-analytics' data='blog'/>

4(d): Save your template.

4(e): Go to Settings > Other tab and scroll down below to add the Web Property ID (1.5).

4(f): Save you settings, it’s done now.

Some FAQ

Which method to use?

Whichever you find it easy, it totally depends upon you.

How to enable Google Analytics in Dynamic views?

You have to follow step 1, 2 and 4(e).

Is it necessary to add Google Analytics?

Not necessarily if you are just blogging; have a personal blog; blogging just to write; blogging just for fun. Blogger has a built in analytics that can be found under your blog’s Overview tab. It’s just enough. Google Analytics is just a more advanced version of it.

How to add multiple sites/blogs to Google Analytics?

In step 1.1 I have told you to give a name, except your blog’s name, for this particular reason, that is, if you have multiple blogs and want to track them also. So let’s start with it.

On step 2 find Web Property Settings tab (5.1), click it and below it add your blog’s name under Web Property Name and Apply. Now click the link of your profile name (5.2) found on the top as shown on the image.

Click to enlarge

To add your other blog just click + New Web Property (5.3), that’s it.

Click to enlarge

To add any other fancy tracking gadgets/widgets or not?

Preferably, not needed as this will give you every detailed stat.

Important

Images are used from new Analytics new interface. If you are using the old version, it can be changed to the new version from the link found on top right corner and vice versa. In the meantime if the interface changes, report back to me so that I can arrange proper images for you.

Blogger settings are described from the new UI for Blogger.

Blogger Dynamic View Templates Pros and Cons

2011-09-30T12:32:00.000+05:30

Blogger finally rolled out templates with Dynamic views. It is built with all the latest technologies like HTML5, CSS3 and AJAX. Blogger adds that “Dynamic Views is a unique browsing experience that will inspire your readers to explore your blog in new ways”.

To find out, you can setup a test blog (it’s better to test things out before applying it for your main blog) and apply the new dynamic templates from Blogger’s Dashboard > Template tab. You will find that there are 7 templates to choose from, namely, Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeslide.

Image by Blogger Buzz. Click to enlarge.

I applied it to one of my test blog and found out some positive and negative sides of these templates. Let’s see what these are.

Pros:

Needless to say it’s fast and Blogger says that it’s 40% faster.
Using HTML5, CSS3 and AJAX, Blogger gave some beautiful effects increasing the viewing experience.
Say goodbye to “Older Posts” link. All the posts will appear in a single view.
Readers viewing your blog can change to their own dynamic view from view chooser found on top left corner.
Sharing buttons like Tweet button, plus one button and Like button are included.

Cons:

No “Edit HTML” option which ensures that you cannot customize the template.
No sidebars to add your own widgets.
Include only 3 sharing buttons. You cannot have more than these, like, Digg or Delicious or StumbleUpon buttons.
If you have applied for AdSense ads, only Leaderboard (728 x 90) and Wide Skyscraper (160x600) ads will be viewable. You cannot show other ad formats.
You and your blog readers will not be able to see your blog if the JavaScript option is turned off or your browser (like some mobile browsers) don’t have it.
You can customize the look only by selecting the type of view and changing the background image. No other options are available (for now).
Lastly, if I can find another one, I will add it here. If you think I missed out something, leave a reply.

The main thing that it’s missing is the “Edit HTML” option because without this option we cannot view and edit the HTML of the template to make it more customizable. I will leave this negative point to priority 1 as this deprives us to do more and make our template more customized.

For example, the Like button on these templates are iframe ones and I would prefer to have XFBML or HTML5 Like buttons so that readers who liked my post can also leave a comment from the popup box. This will ensure that the story that has been Liked also appears on Facebook’s homepage so that my friends can also see it. Next is the Facebook’s Timeline which requires to have more advanced Open Graph Protocol which is required to add it to our blogs manually.

Another example is that Blogger says that it’s 40% fast but normal templates can also be fast too if you remove all the extra fancy widgets you think you could live without. Also uploading smaller sized background images (less than 100KB) and using it wisely can bring down the load time too.

There can be so many examples. Have a look at one of my demo blog.

Conclusion

I admit that I am bad at witting conclusions and I will try to write my best.

If you ask me, though it’s irresistible but for now, I will try to avoid the new dynamic templates until I find that Blogger let me customize my template (or this is what the future of web and other top CMS are).

But if you have a personal blog and you know your readers very well, you can opt for it. Or if you are a big organization who’s brand name is recognized by everyone and every corner of the world (like Google blogs) and want to setup a blog on free hosted and trustable CMS to keep everyone updated (like Twitter blog) you can also opt for it. Or if you think you find it very tempting and cannot resist your temptation, you can apply it.

Remember

You will lose any previous customizations done to your template.

Official Twitter Follow me Button for Blogger

2011-09-14T07:54:00.000+05:30

Before it’s too late, I should tell you that Twitter has officially launched its Follow me buttons. It not only allows your blog readers to join you on Twitter and read your updates but also shows the total number of followers you have.

Update [9/12/2011]: This tutorial has been updated with new Twitter Follow Buttons.

Here is a live example which you can click to join me on Twitter to get updates of my blog posts.

Follow @blogger_raju

You can easily add it to Blogger powered blogs by some simple methods. So, let’s start with it.

Step 1: Go to Twitter official Follow button page and select the options:

First is to give your twitter username in the input field. For example, my user name blogger_Raju.
Select the type of button you want depending on your blog’s background color.
Select whether to show the followers count or not.
Lastly, select the language.

Step 2: After selecting every options, it will give you a preview and below it you will find the snippets that are needed to add it to render Follow me button. There are two parts as shown in the image below:

Click to enlarge

You need the first part only. It will look like:

<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true">Follow @username</a>

Step 3: If you have added the Tweet Button for Blogger, there I have told you to add the JavaScript before the closing body tag so that it loads once and can be reused for every type of widget for Twitter.

If you have previously didn’t added the script then go to Blogger’s Dashboard > Template > Edit HTML (or Dashboard > Design > Edit HTML tab if you have not chosen the new Blogger UI). Find </body> and before it add:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Step 4: Save your template.

Step 5: Go to Layout and add a new HTML/JavaScript gadget. Within this gadget add the first part as told in step 2 and save it.

Now view your blog and see if you have properly added the Follow me button on your Blogger blog.

Customize Attributions

Let’s discuss some advance options on customizing the official Twitter follow button.

data-show-count - Shows the number of followers. To turn this off use data-show-count="false". Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false">Follow @username</a>
```
data-show-screen-name - The default value is true. If you don't want to show the username use data-show-screen-name="false". Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @username</a>
```
data-size - Controlling the size of the Follow button. When not mentioned, it shows the smaller/normal size of the button. To make it large use data-size="large".Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-size="large">Follow @username</a>
```

Important

Don't forget to change username with your Twitter profile username.

If you need the full documentation, it can be found here. Alongside to this, you can also add beautiful floating Twitter Follow me icon to Blogger.

Content Thieves Beware! Google Panda is Watching You

2011-09-04T23:30:00.000+05:30

Google.com, as we all know, is the search engine giant and to stay in this position it makes some rules and changes its search algorithms overtime so that it can give users more relevant search to its users. One of such change that was introduced on February, 2011 was the “Panda” algorithm.

Panda ready to fight for Google

This title was there on my sidebar’s popular posts gadget linking to finding more high-quality sites in search until I thought to write about this and inform my subscribers and others too.

What is Google Panda?

Google Panda is the new search algorithm that lowers the ranking of low-quality sites and blogs. Low quality sites are referred to sites and blogs which are not very useful, have low quality articles, add no or less value to its users and have copied content from other blog and sites.

How can it affect your site or blog?

Your site traffic will decrease as Google Search will send fewer readers and as well as your income will also decrease if you have AdSense or other ad networks or using any affiliate programs.

How to protect your blog from Google Panda?

First you have to accept and agree that “Content is the king”. In more guidance on building high-quality sites, you can find above 20 tips that can help you. Summing up all those I get top five tips that you should do:

Write original articles
Write articles for your readers
Give useful information
Immediately remove duplicate and copied contents
Stop copying articles from other sites and blogs

These are the first steps you should start working on immediately because Google’s algorithm is and will update randomly as to bring up more useful, original and relevant contents around the web.

If you have found out that someone has copied your content then you can file DMCA complaint to Google to remove that content.

Blogger’s Dashboard, New UI!

2011-09-02T09:11:00.001+05:30

Most of you must have heard or is using Blogger’s new updated user interface on draft.blogger.com. Well, for those who love the new UI can now enable it from Blogger.com. You will find the option on top right corner as “Try the updated Blogger interface” on your Blogger’s dashboard.

Here are some images of new UI, extracted from Blogger Buzz, for those who are new or didn’t use it previously.

Try it. Though I hate the colors but the new interface is good and fast too. And if you think that you like the old interface then you can switch it back, but don’t forget to give your feedback on the new UI.

Add Custom Favicon to Blogger - Official

2011-06-08T21:28:00.001+05:30

I was hoping that Blogger will enable us to add our own favicon, also known as favorite icon or shortcut icon. Well, it has already been enabled for us to add custom favicon to Blogger powered blogs.

My assumption was correct because while writing the post about adding +1 (plus one) button to Blogger, the image that was provided by Blogger Buzz was telling that something new is going to happen. For example see the image below:

Well, as you can see that at the top there’s an option to edit the default orange favicon of Blogger to yours. This can be seen under Blogger’s Dashboard > Design > Page Elements tab. But before you replace it with yours you need to make a favicon for your blog.

The favicon should be in .ico format, popularly known as windows ICO (icon) file format and should be less than 10kb. The best and appropriate sizes are 16×16 pixels and 32×32 pixels. You can easily create one with any photo editing software but most of them don’t allow the image to be saved in icon format. In that case you can save your image in .png format and use any online tool to generate favicon or use GIMP, a small but powerful photo editing software, to create one. Name the file as “favicon” and save it in your computer’s hard drive.

After you have successfully created the favicon, all is left for you is to add it to Blogger by clicking the “Edit” link beside “Favicon” as shown in the picture above. Choose the file that you have saved on your hard disk and “Save” it.

To be noted

After saving the settings for your custom favicon, you may not be able to see it immediately while viewing your blog. This happens because the default Blogger favicon remains there in your browser’s cache. To view it, clear your browser’s cache or wait for some days to expire and get deleted by itself.
Your blog’s favicon URL is:

http://your-blog.blogspot.com/favicon.ico

For those who are using the previous hack to add favicon to Blogger can now disable it and use this method.

How to Add +1 (Plus One) Button to Blogger

2011-06-04T00:39:00.008+05:30

Google introduced the Plus One button (popularly known as +1 button) for websites. +1 means “this is pretty cool” and will help your friends, family, contacts and rest of the world to find more relevant topics they are searching for on Google search. Blogger has also enabled this feature and you can easily add it to your blog. But before I discuss to how to add the +1 (Plus One) button to Blogger, let’s find out more about it by this video.

+1 from Google

The easiest way to add the +1 button to Blogger is by enabling the official share buttons. Go to Blogger’s dashboard > Design > Page Elements tab and click the “Edit” link on “Blog Posts” section. This will open a new pop-up window where you have to select the “Show Share Buttons”. That’s it.

Image by Blogger Buzz

Adding Plus One button manually to Blogger

Now here’s comes an advanced option to add the Plus One button to Blogger. This comes handy when you want a more customized +1 button.

Update: Google has made an update to its +1 button: Asynchronous JavaScript, Inline Annotation and +Snippet. Asynchronous script helps to render your webpage smoothly while +Snippet gives your +1ed URLs more accuracy by showing the page title, description of the post and image thumbnail (if any available). Inline Annotation works like Facebook’s Like button, i.e. by showing profile pictures of your friends. Currently, this option is only available to people who have signed up for Google+ Platform Preview.

Step 1: To get this you can visit the +1 official site and easily generate the code for the type of button you want. By this way it will be easier for you to add and implement. While generating the code you will find two types of snippets. The JavaScript and the rendering code for the button. See the example below.

If you prefer to add asynchronous script then let it as it is. But I prefer onload version (will load after the document is ready) as I have found out that the asynchronous script creates some problem with Blogger. So click the Advance options and uncheck Asynchronous.

For Blogger, you have to add some extra snippet to let this render correctly, It's expr:href='data:post.canonicalUrl' which you have to put manually. It is told in live examples below:

Step 2: Go to Design > Edit Html tab and check “Expand Widget Templates”.

Step 3: Find </head> or </body> and above any one of these tags add the onload script as mentioned below:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"/>

This is for English US language only. If you are on a different country with different locale language, then add the JavaScript that you have generated from the official site. For example, if your blog language is in French then the generated code will be:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'fr'}
</script>

If you want to add the asynchronous script, then you have to add it immediately above closing </body> tag to let it work properly. If you need to add any other JavaScript before the closing body tag then it should be placed before the Plus One JavaScript code.

Step 4: Find <data:post.body/> and below/before it add any one (or both) of the rendering codes mentioned below.

Small +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone size='small' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Medium +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone size='medium' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Standard +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Tall +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: right;'>
<g:plusone size='tall' expr:href='data:post.canonicalUrl'></g:plusone>
</div>
</b:if>

Plus One button for Blogger with Inline Annotation

It's the button with inline annotation. In this example I have used the default width of 450px. You can resize it from the official page. Google prefers the minimum of 120px to display it correctly and minimum referred size is 250px.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone annotation='inline' width='450' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Step 5: Save your template.

Must Read:

+Snippet requires Schema.org microdata or Open Graph protocol to work properly. I would recommend Open Graph protocol for Blogger as this can be also used with Facebook Like Button.
You can add multiple buttons at the top of your post or at the bottom.
Conditional tags are used to show it in post pages along with every other page (except static pages). If you want to show it in post pages only then replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
+1 code goes here…
</b:if>

If you want to show +1 to every page then remove the conditional tags completely.
If you want space between the post body and +1 button, put them into divs:

<div style='display: block; margin: 1.5em 0;'>
+1 code goes here
</div>

I have put the tall button within the divs with the property of “float: right” which will make it to float to the right of the post body. Changing it to “float: left” will make the button to float to the left.
More reference: +1 button API on Google Code

Sharing in Facebook Not Showing Blogger Post Description (Solved)

2011-05-28T09:43:00.002+05:30

I have been always asked “why Facebook does not show the description of the post when it has been liked or shared by the readers”. In this post I will discuss different methods to solve this problem.

Facebook has updated its scripts and codes which results in showing a small description of the post and an image whenever it is shared within Facebook. But people who are using Blogger and have added the Facebook Like button (iframe or XFBML) finds that when anyone likes a post, the description of the post is not seen or scraped by Facebook, instead there is only the title of the post and your blog’s link. This is a concern for many bloggers who are blogging on Blogger platform and to be honest, there’s no problem from yours end as it’s a problem of Blogger’s Post Editor itself.

URL Linter states that Facebook pulls out the description of the post from the first paragraph found and is determined by the paragraph tags. It is represented by  tags. Thus, a paragraph will be created when it will be formatted as the example below in Edit HTML mode:

The para starts.

Blogger’s post editor has two modes for you to write namely “Edit HTML” and “Compose” mode. In Edit Html mode you have to format your post manually whereas in Compose mode, the editor will format it for you. In both the cases when you write your post and want to have a paragraph, you generally press “Enter” key on your keyboard. This creates line breaks (  tags) instead of  tags. As a result Facebook cannot extract the description from the post. Either it leaves the description part blank or if the post has comments then it will scrap the comment as post description, as it is formatted into  tags by default within the Blogger template. But there’s nothing to worry about as there are available remedies also. Try any one whichever works for you.

Option 1

Step 1: Go to Blogger’s dashboard > Design > Edit HTML tab and check “Expand Widget Template”.

Step 2: Find <data:post.body/> and add the  tags as shown below:

<p><data:post.body/></p>

Step 3: Save your template.

<data:post.body/> is the part where your actual post is displayed which is written in Post Editor. Adding paragraph tags ensures that the full post body remains in between these tags. As a result, you can write normally within the post editor and no manual formatting is needed. As you publish the post, it will automatically be inserted within the paragraph tags.

But there is a problem also. These tags will break in any div tags are used within the post editor. For example, adding images to your post in Compose mode will break these tags at that position. If you want to use this method and also want to add an image to your post then you have to write the first para, at least containing more than 150-200 words and then you can add the image for your post. In this way you will get the first paragraph with proper tags.

Option 2

You have to add these tags manually within the post editor. Write your post as usual in Compose or Edit HTML mode (it totally depends on you) and in Edit HTML mode add  tags as shown below:

The first paragraph starts.
Second paragraph starts.
And so on…

Post editor in HTML mode. Click to enlarge.

This comes handy when you are adding image at the beginning of the post but remember that it’s the last finishing touch that you have to do because once the formatting is done, you should not go back to Compose mode as it will remove all the formatting. Instead you should click Preview to see if there any finishing touch needed and then Publish the post.

Option 3 (Recommended)

If you are finding it difficult or time consuming to format your post every time you publish it then write your posts using Windows Live Writer, a great free software from Microsoft. Add your Blogger’s account, synchronize (update) the theme of your blog with it and start writing in Edit mode. You don’t have to add any formatting as it will automatically format the post for you. Plus there are also many things you will find common with Microsoft Word along with Blogger's post editor. When done writing you can publish the post directly or can save it as draft. I recommend it the most.

Need of CSS (Optional)

Sometimes it may happen that after formatting your post with paragraph tags you may find that there is no space between the two paragraphs. If so then find ]]></b:skin> and before it add:

.post p { 
margin: 1em 0; 
}

If you think that you need more space then increase 1em to 1.5em or 2em or more.

Remember

When you are writing a new post from post editor, find Options, check Press "Enter" for line breaks and click Done or Save. This is one time process and ensures that you don't see any   tags in HTML mode.

Facebook scraps the page every 24 hours, so, once your post has been shared or “Liked”, it would automatically add the description from blogger post. Thus, it’s solved.

Import Blog Posts to Facebook Page Wall

2011-05-17T17:57:00.002+05:30

After creating Facebook Page for your blog, you don't want to leave it blank. Import your blog posts so that it can be seen on Wall for your Facebook Page. There are many applications to import your blog posts to your blog's Page like HootSuite, Dlvr.it, Blog RSS Feed Reader, etc. But most of the famous ones are Facebook's own application named as Notes and RSS Graffiti.

Import Blog Posts to Facebook Page Using Notes

After creating the Page, click “Edit Page” on top right corner. On next page select “Apps” tab found on the left navigation. You will find “Notes” application as the last option. Go to that application.

On next page you need to select “Edit import settings” that you will find to the left bottom navigation.

You will be redirected to next page where you have to give you blog or its feed's address, agree to the terms and “Start Importing” your blog posts to Facebook.

Select “Confirm” and after that you will be redirected to your page.

It’s all done now. You can see your final Page with your imported blog posts on Wall of your blog's Page.

RSS Graffiti Application to Import Posts to Facebook

Here I will discuss about RSS Graffiti as it’s common and widely used.

Go to the RSS Graffiti app page on Facebook and select the page that you have created for your blog. Next you have to add this application and authorize it so that it can post the updates from your blog to Facebook Page. Check the images below for detailed step by step authorization process.

After authorizing the application, check if the status is displaying “Configured”. If the answer is yes, then it has been done. Now all is left is to add the feed URL, name of your blog and its title.

There’s another interesting setting which you should do if your Facebook Page is too new and you have almost no posts on your blog's Page Wall. Head over to “Filter” tab and select “Next item to publish”. From the dropdown box select the last post from which the application will publish it to your Page's Wall. This will start importing from the last post available to your Facebook Page.

It’s almost done now. Click “Generate preview” to see if the blog posts are imported and displayed correctly and “Save” the settings.

There are many advantages using RSS Graffiti, like scheduling your posts, retrieving twitter feeds and many more. So you have to decide which application to use, Notes or Graffiti.

After you have completed with importing your blog posts to Facebook Page and to its Wall, you need fans and likes for your Page. So don't forget to add Like Box to Blogger.

Create Facebook Like Page for Your Blog

2011-05-09T11:36:00.005+05:30

Facebook is the best place to promote your blog or brand the natural way because when people Like your Page on Facebook, their friends will also be able to see it and can visit your page and become a member or fan too. Facebook is great as it has many active members and friends and even better to grow audiences by creating Facebook Like Page for your blog.

Facebook made some changes as a result the “Fan Page” has now become “Like Page” and also got updated.

The first thing is to log in to your Facebook account and go to Create Page on Facebook. You will get some options to select, like, Local Business or Place, Company, Organization or Institution, Brand or Product and so on. If you are a blogger who likes to blog, it will be best for you to select “Brand or Product”.

Step 2: Select “Website” and give your Page a proper title which should resemblance with your blog's title or keywords. Agree with the terms and conditions and “Get Started”.

Finally you have created a Facebook Page for your blog.

Your Facebook Page is Not Complete Yet!

If you think that just creating a Page on Facebook is the last thing on Facebook that can be done for your blog, then you are wrong. There are many other things you may be missing.

1. Don't forget to upload a picture or your blog's logo as it will give your Page the recognition to your Page fans.

2. Import blog posts to Facebook Page Wall.

3. Invite your Facebook friends to Like and join your Page.

4. Import contacts from your email to Facebook and invite them to Like your Page.

5. Add Facebook Like Box to your blog.

6. After you get 25 fans and likes for your Facebook Page of your blog, get a vanity URL for your Page. For example, when I first created my blog Page, Facebook provided me a long URL for my Page which was almost next to impossible to remember, which has now became short, www.facebook.com/Blogger.Tutorials. To get yours, visit Username page and select the page name from the dropdown menu and give a proper name that you want to have for your Page.

That's it. You now have a complete Page for your blog.

Facebook Send Button for Blogger

2011-05-06T22:43:00.004+05:30

Send button by Facebook enables your blog readers to send your content to their Facebook friends privately in their inbox or to the group wall or to any email address. Let’s see how to add Send button to Blogger.

If you have previously followed the tutorial of Facebook XFBML Like button for Blogger then skip first 3 steps as you don’t require it. Otherwise:

Step 1: Go to Design > Edit HTML tab and check “Expand Widget Templates”.

Step 2: Find the attribution:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

And add the namespace attribute of Facebook after it so that it works with Internet Explorer:

xmlns:fb='http://ogp.me/ns/fb#'

The full attribution will look like:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

Step 3: Find

<body>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

For templates based on blogger's Template Designer and immediately after it add:

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 4: Find <data:post.body/> and immediately after/before it (or both) add:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='like'><fb:send expr:href="data:post.canonicalUrl" font="arial"></fb:send>
</div>
</b:if>

Step 5: Save you template.

Customize Send Button Attributes

font - The font to used by the button. I have used "arial" as default. The other options are: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
colorscheme - The color of the "Send" button. The default I used is light. If you have a darker background then add: colorscheme="dark"

Let’s see two live examples with attribution set:

For this above Send button, the code is shown in step 4.

<fb:send expr:href="data:post.canonicalUrl" font="trebuchet ms" colorscheme="dark"></fb:send>

Conclusion

If you ask me, I will prefer the XFBML version of “Like” because it will give you both the options to “Like” and “Send”.
Conditional tags marked in blue are used to show it every page excluding static page. Replacing these tags with below codes will let it to be seen in post pages only.
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Facebook Send button code goes here...
</b:if>
```

Create a Separate Label or Archive Pages in Blogger

2011-04-29T23:34:00.004+05:30

I got many emails asking me how did I make a separate page for the labels and archive for my Blogger blog. Well, first get a live example of my explore tutorials page and then see the tutorial for it.

The whole process is a complicated one as this includes the proper use of conditional tags to hide a gadget from appearing in other blog pages rather than a particular page. So here we have to create a page and hide the label or archive widget from appearing it in homepage, post pages or other pages rather than the separate page that is specially created to show these widgets.

At first you have to publish a page. You can just publish a simple post and hide the post or can create a static page. Now add the label cloud widget or the archive widget or both the gadgets from Blogger’s Dashboard > Design > Page Elements tab and drag them just below the “Blog Post” gadget (as shown in the picture below) and “Save” it

Step 2: Go to Design > Edit HTML tab and make a backup of your template.

Step 3: Check “Expand Widget Templates”.

Step 4: Now comes the part where you have to hide the label gadget from other pages. In previous tutorial I have told how to hide blogger gadget from showing it in specific pages. So applying that rule, find for:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
…
…
</b:includable>

The “…” is the part where the label gadget snippet lies. We don’t need that part of snippets, instead we need the HTML part in bold.

Step 5: After <b:includable id='main'> add:

<b:if cond='data:blog.url == &quot;URL of the page&quot;'>

And before </b:includable> add:

</b:if>

You only need to change the URL to the post with yours that you have previously created. This is a conditional tag that will tell the browsers that your gadget should be shown when a visitor of you blog visits that URL only.

The code will look like:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL of the post&quot;'>
…
…
</b:if>
</b:includable>

If you have added the archive gadget and also want to hide it, then it’s a little bit of tricky. Find for:

  <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
…
…
</b:includable>

Now same as the label gadget, add the conditional tags. The snippet will be:

 <b:includable id='main'>
 <b:if cond='data:blog.url == &quot;URL of the page&quot;'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
…
…
</b:if>
</b:includable>

Step 6: To test it, click “Preview” which will confirm that you have done everything properly. In the preview tab, you will find that the label/archive gadget is not visible. When you are confirmed, save your template. Now all is left is to redirect your visitors to that page by giving them the link of that page you created in first step.

Additional CSS (Optional)

This is an optional part where you can hide the post that is appearing on top of the label or/and archive gadget. This is for those who find it to be annoying. So find for </head> and before it add:

<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
<style type='text/css'>
#Blog1{display:none;margin:0;padding:0;height:0;}
</style>
</b:if>

This confirms that no post gets visible in that particular URL and don’t forget to replace the URL with the separate label page that you have created.

Show Blogger Gadgets / Widgets in Specific Posts or Pages

2011-04-28T23:43:00.003+05:30

Previously we learned about conditional tags in Blogger and how to use it. Today I will tell you how to use these conditional tags to show different Blogger gadgets or widgets on different or specific posts or pages.

So first go to Blogger’s Dashboard > Design > Page Elements tab and add a “HTML/JavaScript” gadget. I prefer it because it will be easy for everyone to understand. Give it a unique tile so that it does not match with any of the titles of other widgets added (if any).

Now got to Design > Edit HTML tab and check “Expand Widget Templates”. Now press “Ctrl+F” on your keyboard to open the browser’s search bar and search for the “unique” title that you have given to your gadget. Let’s say I have given the title for my widget as “My Widget”. After searching you will find the below snippets:

<b:widget id='HTML1' locked='false' title='My Widget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

It's the widget/gadget that you have added from Page Elements tab. All is left is to add conditional tags just below <b:includable id='main'> and above </b:includable> to hide the widget form specific pages or posts in Blogger. Let us see some examples:

Show Blogger Widget in Post Pages only

If you want to hide any widget or gadget from showing it on homepage or other page and to show it on post pages then you have to add the conditional tags as shown below:

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Show Blogger Widget in Homepage and Other Pages (except post pages)

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Show Widget on Particular Post

<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Conclusion

Above are some examples for some of the pages. If you have followed how to use conditional tags in Blogger, then you can hide particular widgets and gadgets from appearing on particular pages you want. One of it can be found on my explore page.

How to Add Facebook Like Button to Blogger

2011-04-26T23:58:00.010+05:30

Facebook introduced the new Like button which enables your blog visitors to share your blog content on their Facebook profiles with one click. After the launch of this button I have seen many bloggers are adapting it and replacing it with Facebook share button. So why not add it to Blogger.

Update: Now Facebook has updated their Like button and added a new Send button along with it. Visitors who like your post will now also be able to send it to their Facebook friends (individually). Currently, this feature is only available to XFBML version. If you have enabled it for the iframe version, better turn it off, read the customization part.

For an example, click the below button to Like this post:

This is a standard button.

Standard Facebook Like Button for Blogger

Step 1: Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.

Step 2: Find <data:post.body/> and immediately after/before it (or both) add the following codes.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>

Like Button with Box Count for Blogger

Follow the first two steps mentioned above and paste the below script:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</b:if>

Facebook Like Button with Button Count

Follow the first two steps and paste the below script:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>

Example of XFBML Version

This is an example of XFBML Like button which has the Send button with an auto popup comment box. To get this you can follow the tutorial for XFML Like Button for Blogger.

Customizations

Notice the green codes, here you can make some changes to give your buttons a different styles. If you want to change the font, then find font=arial and change it to any one shown below:

font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana

You can also change:

The color by changing colorscheme=light to colorscheme=dark
The width and height (see the above snippets)
The “Like” word to “Recommended” by changing action=like to action= recommend
Show faces by changing show_faces=false to show_faces=true.
And turn off Send by applying send=true to send=false.

Here is an example after applying the customizations:

Points to be noted:

If you want some space to be added between the post body and the like button, then warp the Facebook like button codes within div. The code will be:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding:5px;'>
(Like button code goes here...)
</div>
</b:if>

Conditional tags are used to show these Facebook Like buttons for homepage and every other page excluding static page. If you want to show it only in post pages then replace the above used conditional tag with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Like button code goes here...
</b:if>

If you want only the Send button then follow: Add Facebook Send Button to Blogger

Using Conditional Tags in Blogger

2011-04-26T00:51:00.012+05:30

Conditional tags in Blogger are used to tell browsers what to do in certain conditions. It is a great way to do certain things like hiding widgets or gadgets or your share buttons in Blogger. For example, when we use:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Hello world
<b:else/>
Goodbye Cruel World
</b:if>

It gives the browser the condition that when it’s an item (post) page then show “Hello world” otherwise, for every other pages show “Goodbye Cruel World”. Interesting, isn’t it.
A conditional tag comes handy when you are designing your Blogger blogs and customizing and editing it from the scratch to take it to the next level. But first you need to know how many types of pages are there in Blogger and then how to use the conditional tags respective to that type of page. In this tutorial I will try to cover most of it, so let’s start.

Type of Pages in Blogger and Conditional Tags to Use

Item Page

Item page refers to the individual post pages. It’s the page when you click the tile of the post or the read more link in Blogger to read the full post. The conditional tag:

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

Index Page

It refers to every other page except item (post) pages. The conditional tag:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Hello World
</b:if>

Archive Page

It’s for your archive pages in Blogger. The tag will be:

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Hello World
</b:if>

Static Page

For static pages in Blogger it will be:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Hello World
</b:if>

For a Particular Page

If you want to do something on a particular page then the conditional tag for it will be:

<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
Hello World
</b:if>

The only thing that you have to do is replace “URL of the page” with your page’s URL which you want to have.

Homepage only

It's for the homepage only.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Hello World
</b:if>

Alternative Condition

Now suppose you want a conditional tag that alternates every rule. Say, in first example, I showed how to display something only in post pages but just an “!” mark can alternate that condition. For example, when we apply:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Hello World
</b:if>

It will set the condition that it should be shown on every page other than post page.

Conclusion

“Hello world” is an example, but if it’s implemented correctly, you can add conditions to particular widgets or gadgets to show them in specific pages. However, you can find in most of my tutorials that I have used it. Have a look at my getting social tutorials for Blogger, you will find the tags.

How to Increase the Width of Comment Form in Blogger

2011-04-14T22:15:00.004+05:30

In many Blogger blogs you may have found that the default comment form’s width is much smaller than the post body width. When you are customizing the design of your blog then you must be also thinking to increase the width of the Blogger’s comment form. In this simple tutorial I will tell how to expand it.

Normally, the default width for the comment form of Blogger is fixed at 425 pixels. So we just need to override this with a CSS definition.

Step 1: Go to Dashboard > Design > Edit HTML tab.

Step 2: Find ]]></b:skin> and before it add:

.comment-form{
min-width: 100% !important;
}

As you can see that a minimum width has been set to let browsers know that the minimum width of the form should match with the width of the post body.

Step 3: Save your template and view your blog. After going inside of any post you will find that the size of the Blogger’s comment form has increased in size (width).

Normally this should work with any template.

Simple Blogger Tutorials

Blogger Updates: Redirecting URL and Threaded Comments

Blogger Redirecting URL

So what is top level domain?

Why such a drastic change?

How to stop this Blogger URL redirect?

Any SEO impact?

Who remains unaffected?

What you should do immediately?

Blogger Threaded Commenting

Blogger Threaded Comments Internet Explorer and Chrome Fix

The work around

How does it work?

Note

Enable Threaded Commenting on Blogger Templates - Problem Fixed

Fix to Get back Threaded Commenting System for Blogger

Option 1 (Recommended)

Option 2

Option 3

Blogger enabled Threaded Commenting for us!

Wish You Happy New Year - 2012

Add Open Graph Protocol Meta Tags to Blogger

og:title

og:type

og:url

og:image

og:site_name

og:description

fb:admins

fb:app_id

How to Add Open Graph Meta Tags to Blogger

For advance use

For Developers

Syntax Highlighter for Blogger

Create Google+ Page for Your Blog

Get Your Blog Ready for Google+ Direct Connect

Add a Google+ Badge

Google+ Icon

Google+ Badge

What is Your Google+ Page ID

How to Add Google Analytics in Blogger - Full Tutorial

What is Google Analytics?

Method 1: The Analytics Way

Method 2: The Blogger Way

Some FAQ

Which method to use?

How to enable Google Analytics in Dynamic views?

Is it necessary to add Google Analytics?

How to add multiple sites/blogs to Google Analytics?

To add any other fancy tracking gadgets/widgets or not?

Important

Blogger Dynamic View Templates Pros and Cons

Pros:

Cons:

Conclusion

Remember

Official Twitter Follow me Button for Blogger

Customize Attributions

Important

Content Thieves Beware! Google Panda is Watching You

What is Google Panda?

How can it affect your site or blog?

How to protect your blog from Google Panda?

Blogger’s Dashboard, New UI!

Related Posts Widget with Image Thumbnail for Blogger

Notes:

Add Custom Favicon to Blogger - Official

To be noted

How to Add +1 (Plus One) Button to Blogger

Adding Plus One button manually to Blogger

Small +1 button for Blogger

Medium +1

Standard +1 button for Blogger

Tall +1

Plus One button for Blogger with Inline Annotation

Must Read:

Sharing in Facebook Not Showing Blogger Post Description (Solved)

Option 1

Option 2

Option 3 (Recommended)