Display Avatars Besides Comments In Blogger

It's been quite long since I made a post in this blog. I had a lot of problems with my net connection(still not fixed) and modem. Still, I found some time today, to post about a new feature introduced by blogger, that is, avatars on blogger comments. Blogger is introducing new features daily on account of its 10th birthday celebration. Every blogger wanted to display avatars like the ones, that showed in word press and this dream has come true now. I have personally tried this feature and you may take a look at the snapshot of the feature installed in my blog below.
avatars-beside-blogger-commentsThis feature displays only users who post comments with Blogger/Google account. But, if you post a comment with "Name /URL" you will not have any image displayed. However, if you post a comment using Wordpress or OpenID or LiveJournal or Typepad or AIM, the favicon of the respective sites will be displayed. I hope the blogger team improves this feature and may be, they can join hands with Gravatar too. Let us get to our work of installing this feature in our blog.

If you are using a default blogger template, then you should navigate to "Settings>>Comments" from the Dashboard and enable the option "Show profile images on comment". It is that simple!! You will find the avatars displayed in your blog. But, what if you have a customized template like mine?? Simply follow the steps below to get the featured installed in your blog.
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Note: If you could not find the above code, the search for the following line:
<dl id='comments-block'>
3. Now, replace that piece of line with the following code:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
4. Next, search for this piece of code:
<a expr:name='data:comment.anchorName'/>
5. Replace all the occurrences of the above code(code in step 4) with the following code:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
You may place a default avatar for those who do not have profile picture. In order to do this, place the following piece of code above the line ]]></b:skin>
.avatar-image-container{background:url(http://alturl.com/xbwk); width:35px;height:35px; }
.avatar-image-container img { border:none;}
Finally, you need to save your template. Now, check out your blog with blogger avatar feature installed in it!! Comments are always welcome!! See you soon in my next post!!

Add A Sliding Featured Content To Your Blogger Blog

I hope every one had a look at the "Magazine" type Word press templates that have a special feature namely, sliding featured content. This feature has been incorporated by default in blogger templates, like the Mahusay blogger template. Many readers personally requested me on "How to install this widget in their blogger templates?". So, this post basically explains how to install the sliding featured content on your blogs. Have a look at the snapshot of the widget installed in my blog.
sliding-featured-content-for-bloggerFollow these simple steps to display this beautiful Sliding Featured Content.
1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the current template.
2. Search for the following line in your blog. You may use "CTRL+F" to do the search.
</head>
3. Download this: Text Document One. Now, Open the text document and paste the code present in it on top of the line mentioned in step 2.
4. Now, search for the following piece of code in your blog using "CTRL+F".
<div id='main-wrapper'>
5. Download this: Text Document Two. Open the text document. This is the major part of this widget, pretty difficult task too. You need to customize the HTML lines mentioned in that document. Check out the first block of code. You will find "YOUR TITLE". Replace it with the title of your post. Next, replace "SHORT DESCRIPTION OF YOUR POST" with a short description of your post, say 30-40 words. Replace "LINK OF YOUR POST" with the URL of your post.
6. Now, you will find a phrase like this "LINK OF YOUR POST PHOTO". You need to replace that phrase with the URL of your photo. I mean, a photo that is related to that particular post. The most important thing to note is that you should make sure, the photo size is 600x200, that is the width should be 600 and the height should be 200. You can use Adobe Photoshop or any other tool to resize the photos. Once, you are done with the photo. Upload the photo to a hosting website like Imageshack or Photobucket and get the link to your photo. As mentioned earlier, replace "LINK OF YOUR POST PHOTO" with the link you obtained. Huh!! Job done at last.
7. Repeat the same steps (5 and 6) for the other blocks too. I set the number of blocks(imageElement blocks) to four in that document. But, it is your wish. You may include as many blocks as you want. Once, you finish of all the editing business, paste the entire code below the line mentioned in step 4.
NOTE: "If it is very confusing, then download this Sample Text Document to have a look at the code that I installed in my blog to make this widget working. May be, you will have an idea of what I was blabbering. Laughing Out Loud!!!"
8. Now, preview your template. If any error, try to rectify it or else, contact me and I will help you out. No errors??? Then, save your template. Go check out your blog with one of the coolest widgets installed in it.

I made this post as simple as possible so that people feel it easy to install this widget and they will give it a try. It is not that only professional and high quality blogs can facilitate this of a widget. Even small scale blogs can use HTML effectively and make it more appealing. Please leave your comments if you face any difficulty in installing this widget.

Free Premium Blogger Templates - Mahusay

Mahusay template is one of my favorite templates in the recent past. This template has all the features that a professional template needs. Bascially, Mahusay Blogger Template is a two column template that was originally created by PaddSolutions. This was converted to blogger by Free Blogger Template. The color scheme of the template is very impressive. It has got dark and light shades of cream with white as the background for blog posts, text written in black and offers a beautiful Featured content.
The Featured content is a slider that keeps rotating on a regular basis. You may include a short description about the post in it! This widget definitely impressed me and makes the template more stylish. For people, who want to add this sliding "Featured content" widget in your blog, you may contact me personally via Email and I will let you know how to install the widget in your blog. The Read More option, like in Wood Mag Blogger Template, is incorporated by default in this template too.

Main Features:
An Elegant Menu Navigation, Sliding Featured Content with Automatic Post Update, Beautiful space for Author Profile(next to the Featured Content Widget), Default FeedBurner Subscription Form incorporated below the Author profile, 468x60 Banner Ads display at the top, Recent Posts and Recent Comments Widget at the Footer and many more... This template definitely offers a lot more features than the usual ones. It is pretty easy to troubleshoot the errors with respect to HTML coding. The coding is structured properly and there fore, you will not have any difficulties with resolving your problems provided, you know some basic HTML.

Overall, this two column template has got all the features required for a professional blog. I would rate 4 out of 5 for this template because it is pretty difficult to incorporate all the widgets and other craps in two columns. You may use it for personal blogs too!! Definitely will suit both! I hope you enjoyed this template. See you soon in my next post!

Add Tweet This and Retweet To Blogger Posts

Twitter is one of the fastest growing social networks in the recent days. Many feel it drives a lot of traffic to their blog, especially when they have a large number of followers. We should some how use this twitter to improve traffic to our blog. So, how are we going to do that? Simple, just by adding a "Tweet This" link to our blogger posts. There are certain blogs that include Tweet this in the footer of their posts, that is, at the end of the post as a social bookmarking icon. But I recommend you to place it at the top, next to the title of your post.
retweet-button
This post basically explains, how to add tweet this and also a retweet button to blogger posts. Many blogs have links only for "Tweet this" but not for "ReTweet". This post includes both Tweet and ReTweet option, there by, driving more traffic to your blog and making your posts more effective. This service is provided by Tweetmeme. Check the official page by clicking on the link here: Tweetmeme. The final output after installation will generate a button as shown in the picture. Fine. Enough of bla bla bla.. Let us get in to our work. Follow these steps.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line, if you want to show the button below the title of your post:
<div class='post-header-line-1'>
Else, search for the following piece of code to add the button at the right end of your blog posts.
<div class='post-body entry-content'>
3. Paste the following piece of code just after the above line(either below the title or embedded with your blog posts).
<div style='float:right; margin-left:14px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
4. Save your template. That is it!! Your done with the installation. Very simple I think!!

Add Social Bookmarking Buttons/Icons Below Blogger Posts

I received few comments from my fellow bloggers relating the social bookmarking in blogger posts. Though, I have discussed how to install this in my previous post, there are few more doubts and clarifications regarding this hack. More over, my previous post just displayed links of all the social bookmarking sites and never included any buttons or icons in them. As we know social bookmarks improve traffic to our blog, it is necessary that you make it more attractive and big. Therefore, I thought why not post about this issue in my blog.

Enough of my story and your stories. Let's get our job done now!!! Follow these simple steps to display beautiful social bookmarking sites below every blogger posts.
1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line:
<div class="post-footer-line post-footer-line-1">
3. Download any one of the following text documents, that is, download the first text file for installing large icons below your blog posts. If you want small icons below your blog posts, then download the second file.
4. Open the text document. Paste the code that you see in the text document just below the line in step 2.
5. Preview your template to check for errors in HTML code. Thats all folks!!! If you find any error, let me know via comments. Else, Save your template and enjoy those cool icons below every blog post you do.

What Is RSS All About?

I really wondered "What is RSS?", when I started blogging and I never knew what impact, it had on my blog. I just installed in my blog because I found the same in all other blogs. Now, it has been a year since I entered this blogging world and I got to know a little about this RSS which I want to share with my readers. To be very simple, it is another method for the readers to keep track of your blog. RSS stands for "Really Simple Syndication", a technology that websites use to distribute their content.

RSS-Tablet-IconI am sure many of them use bookmarks to keep track of their favorite sites, that is checking those sites everyday or may be on a regular basis for new content. Instead, you can subscribe to each site's RSS feed and you will be informed automatically by your RSS Reader, once there is a new content added on that site. I have used two new terms "RSS feed" and "RSS Reader". What is this crap??? Wait... Relax with a coffee. Let me explain that to you.

Websites that use the technology of RSS create special files, called "feeds". As mentioned earlier, these files are designed in such a way that they are updated periodically to contain the latest information about the site. A RSS reader is simply like a software, in other words, an application to view the RSS feeds. There are two types of RSS readers available, namely, Web Readers and Desktop readers. The former one is the most preferred, because you can store your feeds on the internet rather than on your hard drive. Some of the popular and free RSS readers are: Google Reader, FeedDemon, Bloglines, etc... I prefer Google Reader because, it is simple to use.

Fine. I got my RSS reader. Now, what do I do? Simply, subscribe to the RSS feed of all your favorite websites. Now, how do I do this? Few sites mention "Subscribe Via RSS" or provide an icon, (something like the one, I should on top of this post) some where in the site for their readers to subscribe via RSS. While few browsers, like Fire Fox have got this option in built, that is, you can click on the icon displayed on the right end of the location bar to subscribe to them. Feel free to subscribe to my RSS feed too.
[netinsert=0.0.1.11.14.1]