Simple Blogger Tutorials

Add Fixed Floating Share Buttons to Blogger

2012-05-22T13:25:00.000+05:30

Let us add a fixed sharing buttons widget that will float to the left or right of the post section of Blogger with the help of jQuery.

Previously I had written about animated floating widget which was/is still popular. But many didn’t like it and wanted it to be fixed while scrolling like the one I have in my blog. Many requested for this and after giving a thought I am writing this for you. So let’s get started with it.

Google Penguin update hit me Hard

2012-05-01T01:55:00.000+05:30

On April 24, 2012, Google released a new search algorithm, later it was named Penguin. This was mainly meant to stop “webspam”, that is, mainly to bring down the sites which use “black hat” methods to rank well in Search Engine Result Pages (SERPs), like, violating webmasters guidelines, keyword stuffing, participating in link schemes, etc.

When I read it I was happy that after the Panda update, Google moved a step forward to stop those spam sites who wishes to rank well within SERPs by shortcut methods. But as days passed, I became very sad and depressed as I found out that my blog also got hit by this update. My traffic dropped below 50%, some of my great posts cannot be found within SERPs and some went very down.

Add Pinterest Pin it Button to Blogger

2012-04-12T18:44:00.000+05:30

Nowadays, Pinterest, a social sharing site, which allows you to organize and share (pin) your interests, has become very famous as this site is more simple, beautiful and organizable. They also have launched their sharing buttons known as “Pin it”. So, while the craze is on, why not make use of it and add it to our Blogger blogs.

Pinterest share button has counter and comes in different sizes. But before you add it, let’s see what you have to do first.

Blogger SEO Update: Get Ready to Add Meta Tags

2012-04-12T12:03:00.000+05:30

Blogger has now become more Search Engine friendly with its recent updated features. Now you don’t have to search for any hack to add Meta tags to Blogger as you can have it the legitimate way. Just check whether you have the correct codes, enable some settings and off you go. Now you can add description Meta tags to not only for your blog’s homepage but also to individual pages. So let’s get started with it.

Check if your blog is Ready for Meta Tags

Update (12/4/2012): Just enabling the settings won’t do. First check if you already have got the correct codes added to your Blogger template which will actually do the job. While editing the template, find for:

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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:

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

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

Google introduced the Plus One (+1) button for websites. That means we can add it to our Blogger blogs too. +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.

But before I discuss to how to add this button on Blogger powered blogs, let us find out more about “Plus One” by this video.

+1 from Google

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.

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.

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 has many active members, so it is 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 to new Timeline interface.

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.

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

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).