Blogger Buster: free blog templates, tutorials and tools

What Are the Main Features of Intense Debate?

Intense Debate is a fully featured commenting system which provides many more features than Blogger's standard comments, including:

• Comment form beneath posts (on the same page)
• Threaded comments, which allow commenters to reply directly to each other and be visible as a comment "heirachy"
• Comment avatars (of registered Intense Debate members)
• The ability to vote comments up/down (so the most popular comments can float to the top of the list)
• Profiles for registered members, which include links to members' blogs and social media profiles
• Widgets for top commenters and recent comments which you can add to your Blogger layout with ease

You can read about these features in full detail, or watch the two minute video of Intense Debate functionality which explains this service in a snap!

How to Install Intense Debate in your Blogger Blog

It is surprisingly easy to install Intense Debate commenting in your Blogger template! Even when I tried this method for non-standard and highly customized templates, I found this method worked just fine.

If you would like to use Intense Debate as an alternative to Blogger's commenting system, here is what you should do:

1. Head over to the Intense Debate home page and add your blog's URL in the box provided. Then click on the Install Intense Debate" button:
   
   
2. If your blog is hosted on Blogspot (eg: yourblog.blogspot.com), Intense Debate will automatically detect your blogging platform.
   
   If you use a custom domain (eg: www.yourblog.com), you will need to choose Blogger as your blogging platform.
   
   Once Intense Debate is sure of the platform you are using, you will see a screen like this:
   
   
   
   Here you have the choice of installing Intense Debate comments as a widget (the easy method) or directly in your Blogger template, to appear below your posts (the recommended method).
   
   If you choose to add this as a widget, simply click on this option and follow the steps to add this as a widget in your blog sidebar.
   
   If you would prefer to use the full commenting system, continue reading instead!
3. Installing the full Intense Debate commenting system really is a breeze! In this case, you will need to follow the steps provided on the installation page to make a back-up of your full Blogger template by going to Layout>Edit HTML in your Blogger dashboard, and clicking on the "Download full template" link.
   
   This saves a copy of your existing blog template (including any widgets and customizations) to your computer.
   
   Once you have done this, go back to the Intense Debate installation screen and click the "Browse" button to locate your template file on your computer.
4. Next, you have a decision to make: you can either:
   • Choose to install Intense Debate on posts where there are no existing comments
   • Choose to replace all comments with Intense Debate comments instead.
   If you do choose to replace all comments, these existing comments will not be lost! You can retrieve and import these to Intense Debate afterwards if you choose to do so (as shall be explained shortly).
   
   Check the radio selection for the option you prefer, then click the "Upload file and continue" button.
5. On this next screen, you will see a box filled with code. This is your Blogger template code which has been modified to include the Intense Debate commenting system.
   
   Copy all of the code in this box to your clipboard. Then go to Layout>Edit HTML in your Blogger dashboard.
6. Replace all of your existing template code with this modified code from Intense Debate.
   
   You can check that you have installed this correctly by previewing your changes. If the installation was successful, you will receive no error notifications and can proceed to save your template.
7. Finally, click on the "Finish" button right near the bottom of the Intense Debate installation page. Then visit your blog in your web browser to check out your new commenting system!

Changing the Comment Settings

Once you have installed Intense Debate comments in your Blogger blog, you may like to change some of the settings to suit your individual requirements.

To change your Intense Debate settings, you will need to access your Intense Debate dashboard and click on the "settings" link for the blog you wish to access.

Here are the different comment settings you can change to suit your needs:

• Blog Info: Here you can alter any details for your blog, such as the URL, blog title and RSS feed.
• Comment Posting: This section includes any moderation opions you may wish to alter. You can choose to moderate all comments before they appear beneath your blog posts; moderate posts containing words in a blacklist, and even automatically delete comments if they contain certain "banned" words and phrases.
• Email Notifications: Choose whether you would like an email to be sent to blog authors whenever a new comment is posted (similar to Blogger's comment settings).
• Display Settings: If you would like to enable "threads" (this allows a person to comment directly to another commenter), tick the appropriate box. You can also set the default order of comments (readers will be able to re-order this list for themselves if they choose).
• Comment Link Text: In this section you can choose to alter the text used for your comment links. By default this is set to Comments ([#]) where [#] is the number of comments. You could change this to "[#] Responses", "Observations: ([#])" or indeed any other link text which you prefer!
• Add another blog admin: This setting allows you to add new moderators who can access your Intense Debate settings, which is useful for group bloggers.

Changing the Appearance of your Intense Debate Comments

When you first install Intense Debate comments, you will notice the color scheme and fonts match those already present in your template! This is lucky since Intense Debate do not recommend that you alter the CSS for your comments (this is still in beta, the code used may alter and render such changes invalid).

There are however a few changes you can make from within your Intense Debate dashboard. To access these layout settings, go to your Intense Debate dashboard and click on the "Layout" link for the blog layout you wish to alter.

From this page, you will be able to alter the following settings:

• Comment Size: This setting means you can alter the avatar and font size for each comment as "compact", "normal" or "large".
• Button Style: This affects how links to "post a comment", "post-reply" and "submit" are displayed in your comment section. Choose from either a button or text link style (which appear like normal links in your posts)
• Comment Layout: This option enables you to change how comments appear beneath your posts. The default setting is for comments to be permanantly displayed beneath each post. Alternatives include "peekaboo comments" (activated by clicking on the comment link), and comments in a pop-up page.
  
  Most bloggers choose the default (comments already present beneath posts) setting, which is also my personal preference as clicking on a link adds another step for readers and offers less incentive for actually leaving a comment on your posts.

One thing you may notice on the layout page is that "Chameleon" is the only choice of style for your Intense Debate comments, though there is an image which suggests other styles may become available soon:

Import Existing Comments from Blogger

If you choose to install Intense Debate for all your existing blog posts (including those posts which already have comments) you may prefer to import any existing comments from Blogger to be displayed alongside your new Intense Debate comments.

Importing your old comments is very easy. Simply go to your Intense Debate dashboard and click on "Overview" for the blog whose comments you wish to import.

Next click on the "Blog Tools", then on the "Import Comments" link in the left hand column.

On this page, you will be prompted to log in to your Blogger account, which will allow Intense Debate to access the API for importing your comments. Once logged in, you will be able to choose which blog you wish to import from and to (be sure to import/export comments from the same blog, otherwise Intense Debate will not be able to allocate them to the correct posts!).

When you choose to import these comments from Blogger, the existing comments will not be deleted! If you decide to uninstall Intense Debate for any reason, you can export all your Intense Debate comments to an XML file, and restore the view of your existing Blogger comments.

I'm not sure that it's possible to export Intense Debate comments back to Blogger at this time as Blogger's API does not allow comments to be automatically created using such third party software (though I strongly suspect it may be possible for respected services like Intense Debate to do this in the future).

Manage your Intense Debate Profile

One of the more useful functions of Intense Debate is profiling. By using your Intense Debate profile to leave comments on ID-enabled blogs, you can increase your reputation, link to your other social networking profiles, add an avatar and monitor comments left on all blogs you visit!

Readers can vote comments up or down (depending on their perceived value to the conversation). Comments which are voted up increase that commenters reputation (whilst the reverse also applies too).

Troubleshooting Intense Debate Installations

From my experiences is using Intense Debate so far, I am happy to say that there are very few possible problems which could occur.

While testing Intense Debate installation with both default and heavily customized (third party) Blogger templates, I have only found two possible problems which may occur during installation: imported comments may not appear as soon as they are imported, and the comment count on heavily customized templates may not appear.

Both of these can usually be resolved easily using the following methods:

Imported comments do not appear

First of all, check the comments in your Intense Debate dashboard to ensure these do appear for the appropriate blog (if not, you should attempt to import them again).

If the imported comments are present, chances are that Intense Debate has not caught up with these comments yet. Be patient, and soon enough you should notice these comments appear in the Intense Debate comment area beneath your posts.

If after a day or so the imported comments do not appear, you should ask for help in the forum. This forum is watched by members of the Intense Debate team who seem very helpful and will be able to help you resolve this problem quickly.

The comment count does not update

I've only ever noticed this problem occur in heavily customized templates where the comment count appears near the top of each post, rather than in the post-footer section.

I suspect this problem may occur because the comment-link tags is separated from other elements of the comments section, and is not parsed correctly by Intense Debates (otherwise flawless) installation system.

The fix for this problem is a little more complicated, but not too difficult.

Depending on whether you have chosen to replace all comments with Intense Debate, or only the posts which do not already have comments, you should use one of the following methods to solve this:

• If you have chosen to replace only posts which don't already have comments:
  
  Firstly, backup your existing template code (to ensure you can restore your template if thhere are any problems).
  
  Find this section of code in your Blogger template:

  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a>

  Check that this section of code is not surrounded by Intense Debate HTML comments, which appear like this:

  <!-- Intense Debate -->
  
  <!-- /Intense Debate -->

  If these comments do not appear around this section of code, replace the code with the following instead:
  <!--Intense Debate--> <b:if cond='data:post.numComments == 0'> <div expr:id='"IDCommentPostInfoTitle"+data:post.id' style='display:none'><data:post.title/></div> <div style='display:none' expr:id='"IDCommentPostInfoTime"+data:post.id'><data:post.timestampISO8601/></div><div style='display:none' expr:id='"IDCommentPostInfoAuthor"+data:post.id'><data:post.author/></div><div style='display:none' expr:id='"IDCommentPostInfoCats"+data:post.id'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div> <a expr:href="data:post.url" expr:name="data:post.id" class="IDCommentsReplace">Comments</a> <b:else/> <!--/Intense Debate--> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> <!--Intense Debate--> </b:if> <!--/Intense Debate-->
  
  
  Finally, save your template. If this was successful, you should see the comment count appear on your posts which relates to the true number of comments (whether Intense Debate or Blogger generated comments).
• If you have chosen to replace all comments with Intense Debate:
  
  Again, backup your existing template to restore if there are problems using this method.
  
  Find the following section of code in your template and ensure it is not surrounded by the Intense Debate HTML comments:

  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a>

  Providing this section is not surrounded by the Intense Debate HTML comments, replace this section with the following code:
  <!--Intense Debate--> <div expr:id='&quot;IDCommentPostInfoTitle&quot;+data:post.id' style='display:none'><data:post.title/></div> <div expr:id='&quot;IDCommentPostInfoTime&quot;+data:post.id' style='display:none'><data:post.timestampISO8601/></div><div expr:id='&quot;IDCommentPostInfoAuthor&quot;+data:post.id' style='display:none'><data:post.author/></div><div expr:id='&quot;IDCommentPostInfoCats&quot;+data:post.id' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div><a class='IDCommentsReplace' expr:href='data:post.url' expr:name='data:post.id'>Comments</a>
  
  <!--/Intense Debate--> <!--Intense Debate-PRE ID <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a> -->
  
  
  Then save your template and check to make sure the comment count appears in your blog posts.

If you are still experiencing problems with your Intense Debate comments, the best advice I can offer is to visit the forums where members of the Intense Debate team will be on hand to assist you with your problems.

Over to you!

Do you already use Intense Debate? Or are you considering using this free service as an alternative to Blogger's default commenting system?

If so, please let us know your own opinions of Intense Debate comments by leaving your comments below.

Getting Started With AideRSS?

To begin analyzing the rank of items in your own blog feed, simply visit the AideRSS homepage and type your blog's RSS feed URL into the box.

If you use Feedburner to burn your Blogger feed, enter the URL of your Feedburner feed (eg: http://feeds.feedburner.com/YOUR-FEED-NAME).

If you do not redirect your feeds through Feedburner, you will need to enter your feed URL like this instead:

http://yourblog.blogspot.com/rss.xml

On the following page, AideRSS will analyze your blog feed, then refresh to offer results of each items Postrank:

Once you've taken a look at the popularity of your most recent posts, you can go ahead to create your popular posts widget by clicking the "Sharing and Widgets" link near the top right of the screen.

This page displays a preview of what your widget would appear like on the left, and the code you can use to display this widget to the right.

Adding the AideRSS Popular Posts Widget to Your Blog

To add the widget in it's default format, simply copy the code in the box, and paste this into an HTML/JavaScript widget.

If you would prefer to customize the widget, there are prompts in the JavaScript code which explain how to change the following:

• Date Range: Choose from Year, Month, Week or Day
• The Number of Posts: by default, this is set to 5. Simply replace this variable with the actual number of posts you would like to display.

If you prefer, you can even add the JavaScript code to display the results with a post, like this:

To use the JavaScript in a blog post, you must ensure that you create your post in Edit HTML mode, otherwise the JavaScript will become malformed and not display once your post is published.

There is no need to register with AideRSS to analyze your blog feeds or use the popular posts widget.

Once you have first analyzed a feed URL using this free service, you will be able to access the data anytime you like.

More about AideRSS

This popular posts feature is not the only useful aspect of AideRSS. You can also use this free service to save time by filtering your feed subscriptions to display only those which you may be interested to read. Also, Jake Luciani used AideRSS functionality to research the best time of day to publish blog posts.

You can learn more about this popular internet startup on the AideRSS about page, and get a feel of what this system is capable of by looking through the API pages.

Please let me know what you think about this widget by leaving your comments and opinions below.

You don't need to register or login to Skribit to make or vote for a suggestion, and you can vote for an article more than once.

Registering with Skribit enables you to track the progress of your votes on any site which uses a Skribit widget, and also to create a widget of your own to feature in your own blog sidebar.

I'm sure many of you would like to suggest future posts or have questions about using Blogger, so please jump in and offer your ideas!

As suggestions posted in the widget are answered in my posts, I will link to the post from within Skribit (though I'm not sure this will appear in the actual widget).

Also, I will soon be posting a full article about adding and using Skribit in Blogger which will answer the default question: "Why are you using Scribit".

As always, you comments are appreciated so please feel free to leave your own below. And be sure to post any ideas for posts you may have in mind! Reader interaction is something I really love about this site, and a feature I would like to foster in regard to future posts.

The loading icon used for this tutorial is the same as that which appears in the top-right hand corner of this blog when you load the page:

This small, unobtrusive image has a minimal file size, and is easy on the eyes so it doesn't detract from other style elements of the page.

Of course, if you would prefer to use a different icon, you can change the URL of the image in the code used for this hack as I will explain shortly.

Adding the Loading Icon to your Template

Adding this page loading icon is as simple as copying and pasting a section of code!

Simply go to Layout>Edit HTML in your Blogger dashboard, and find the opening <body> tag.

Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the <body> tag):

You can then preview your blog to see the page loading icon appear in the top right-hand corner of your blog template momentarily until the page has loaded.

Providing there were no errors received when you previewed the page, you can then proceed to save your template.

That was easy, wasn't it?

Changing the Animated Icon

Of course, some of you may prefer to use a different animation to the one featured here.

Any animated GIF image may be used as a page loading icon, and all you have to do to alter the image is change the URL in this line of the script to match the location of your preferred image instead:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

Ajaxload is a really useful resource for generating your own color styles of image loading icons. Alternatively you can find a great selection over at Sanbaldo.com

Adding text to the loading icon

You can even add an explataroty "loading..." message to your icon by adding this just before the icons image tags, like this:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'>Loading...<img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

A little info about this script

I had originally experimented with the script used in Meta-Microcosmos to feature the loading icon which is housed in the <head> section of the template.

However, this caused some problems when viewed in IE6 as this caused the icon to appear above the template, rather than in the corner (it occasionally caused the page to freeze too!).

So instead I adopted this version which uses the body onload function to cause the script to take action. This ensured that the icon appeared correctly in all browsers I have tested in, including IE6 and 7, Firefox and Flock.

If you notice any problems in other web browsers, please let me know about this!

Also you may have noticed the need to "escape" certain HTML characters within the script itself. This is because Blogger parses JavaScript differently when it is featured in the body (rather than the head) section of the template. However, when you look at the source code of your template, you will see the original script coded correctly.

Final Thoughts

While this Blogger hack may be mostly cosmetic, it is a fun and interesting feature which can add style and personality to your template design.

I hope this article has been useful for you! If you have enjoyed this tutorial, please consider subscribing to Blogger Buster for future tutorials and Blogger news.

If Sprout Builder seems like a tool you would be interested in using too, you can get started creating your own widget right away! You will need to register your name and email address in order to save and publish your widget, but the easy "greenhouse" building platform will offer you an idea of the possibilities until you're ready to sign up for your free account!

One of the best things about Sprout widgets is that they can be embedded in almost any web page. Even in MySpace! This means you could create a Sprout to promote your blog and include this in your online profiles, your web page, send it by email and ask your friends to share it too.

A great Sprout widget could easily become viral, and when used as a means of blog promotion this has the potential of gathering more readers (and potential subscribers) to your blog.

Sprout is rather easy to use. Building your widget is a case of "drag and drop", but I would advise using one of the pre-made templates to get an idea of how pages are constructed before trying to build one from scratch!

My only complaint so far is that the widget builder hogs my computer's memory; after using this for a while I noticed the interface became rather slow (but then my beloved laptop isn't quite as high-spec as I'd like...).

No doubt, Sprout will become an invaluable marketing tool as it's popularity develops. I'm definitely using this for some other projects I have lined up in the coming weeks!

Pop over to Sprout Builder to check it out for yourself and let me know what you think about using this as a promotional tool for your blogs. And if you create a great Sprout of your own, feel free to send this my way!

Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.

If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.

The widget code for your Twitter badge will most likely appear like this:

<div <--Add Style Here --> id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.

Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

<div id="twitter_div"

Here is an example of the Twitter widget code with style declarations added in red:

<div style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Add a Twitter Widget using this Widget Installer

For those of you who would prefer a simple method of adding a stylized Twitter widget to your Blogger powered blog, here is a widget installer which will add a widget with an easily recognizable "Twitterific" icon, like this:

The colors and fonts of this widget will blend with other elements of your blog, while the Twitterific icon will be easily recognized and help your readers associate this widget with Twitter.

To add this widget to your blog, simply fill in the details in the form below. Your Twitter username is the one which you have chosen to represent you on Twitter. For example, my username us "amandafazani" and my Twitter URL is http://twitter.com/amandafazani. Add this username into the appropriate box, then change the title and number of tweets to display as suited to your needs.

I hope this post has been informative in explaining how you can add style to your Twitter badge/widget in your Blogger blog. Please let me know what you think by leaving your comments below.

Please note: if you are reading this post in your feed reader, you will not see the widget installer and will need to visit this page in your browser instead!

Update: I've just changed the mark-up of the widget to capitalize only the first letter of each word in the post titles (thanks to Angel's great advice!)

Installing this widget in your own Blogger blog is easy:

1. Change the title of the widget if you prefer.
2. Add your blog's URL in the input box (don't include the http:// part as this is already inserted by the script)
3. Click the "Customize" button to make the changes take effect, then click on the "Add to Blog" button.

At this point, you will be taken to the widget installer page where you can choose which of your Blogger powered blogs you would like to install this widget.

O Ricardo traduziu este widget para Português que pode ser encontrado nesta página.

A bit more information about this widget

I have developed this widget using Yahoo Pipes, where I added variables to retrieve 5000 comments and extracted the titles and URLs using Regex (regular expressions).

If you would like to take a look at how this works, feel free to hop over to the Blogger Popular Posts/Most Commented Pipe page where you can also make a copy and edit to your own specifications.

Using This Widget in a Blogger Feed Widget (Alternative Installation)

If you would prefer to use Blogger's Feed Widget instead (which loads the items slightly faster), you modify the following feed link to include your own URL (eg: yourblog.blogspot.com or www.yourblog.com) and add insert this as the "Feed URL" on the widget configuration page:

http://pipes.yahoo.com/pipes/pipe.run?_id=1cf38ae68efbe859c4ba1ee239cec099&_render=rss&num=50&url=http%3A%2F%2FYOUR-URL-HERE

However, using Blogger's Feed Widget will limit the number of items you can display to 5 instead of 10, and you will not be able to number your items.

Troubleshooting the Popular Posts Widget

If you have installed this widget in your blog but the post links are not displayed, this may be due to one of the following issues:

You have added your blog's URL incorrectly

Double check your blog's URL when you add this to the widget installer, and remember not to add the "http://" part as this is already added by the script.

Your Comment Feed is Set to None

To remedy this, go to Settings>Site Feed in your Blogger dashboard and click on the "Advanced Settings link. Here you will see the option to switch your comments feed to Full or Short instead of None.

I have tested this widget extensively for both Blog*Spot and custom domain URLs in Internet Explorer and Firefox. So far, I haven't come across any problems, though if you do have a problem with this widget which I've not covered here, please do leave a comment or get in touch and I will try to help.

If you have found this widget to be a useful addition to your Blogger blog, please consider subscribing to the Blogger Buster feed and be updated of new articles about Blogger as they are posted.

Instructions to add Technorati Blog Reactions Widget

1. Go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand Widget Templates" box.
2. Find the following line of code in your template (an easy method is to use the CTRL+F keyboard shortcut:

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

3. Immediately after this line, copy and paste the following section of code:
   
   <script src='http://embed.technorati.com/linkcount' type='text/javascript'/> <a expr:href='&quot;http://technorati.com/search/&quot; + data:post.url' rel='linkcount'>View blog reactions</a>
4. Finally, save your template!

Once you have installed this widget, Technorati will update each individual post featuring this widget to include the number of blog reactions. It may take a few moments to come into effect, so don't worry of you don't see the effects immediately!

I hope this tutorial has been useful for you too! If you've enjoyed this post, please consider subscribing to Blogger Buster for future updates and Blogger news.

How will it work?

The "popular posts" in this widget will be formed from the posts which have attracted the most comments. This information will be pulled from your blog's comment feed, and the output would consist of the post title, linked to the post page with the comment count in brackets beside it:

While I would have preferred a solution which takes page views into account, this was simply not an option for me as it would involve developing a tracking script and relevant RSS feed for each blog.

Time permitting (as I have been rather busy these past few days!), I hope to have this "Popular Posts" widget ready over the weekend, so be sure to check back soon if this would be something you're interested to use in your blog!

Please let me know what you think about this idea by leaving your comments below.

SmoothGallery offers many different styles of gallery, but unfortunately not all options function properly in Blogger powered blogs.

So in this tutorial I will explain two different styles of SmoothGallery slide shows which I know can be used in Blogger blogs and have tested in different browsers:

• A timed slide show (similar to the one featured in the sidebar)
• A manual slide show, where your visitors can skip through each slide using arrow buttons

The initial installation for these slide shows is essentially the same; you can configure the different options for display after installation as I shall explain later in this tutorial.

Requirements (read this first!)

You need to ensure you have access to a hosting account where you may upload images, JavaScript and CSS files. Most free file hosting services allow you to upload these file types, including Google Pages and the hosts listed on this page.

You will also need several images which are all exactly the same size. For the purpose of this tutorial I would recommend these images to be 200x100 pixels in size which would fit neatly in most Blogger sidebars. If you prefer to use images of different dimensions, you will need to change the size of the gallery in your style section, as I shall explain later in this tutorial.

If you are able to meet these requirements, read on to see how easy it is to install your own SmoothGallery slide show!

How to install your SmoothGallery Slide show

First of all, you need to download the files needed to make the slide show function. For your convenience, I have included the files required to run this in Blogger blogs in a zip file which you can download below.

Download Blogger_SmoothGallery.zip

When you have downloaded these files, retain the same directory structure and upload these to your file host.

Next, go to Layout>Edit HTML in your Blogger dashboard and search for the closing </head> tag. Immediately before this line, paste the following section of code (substituting "your-file-host" for the URL where your Blogger SmoothGallery files are hosted:

Then search for the closing </b:skin> tag on your template. Immediately before this line, add the following section of code:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Adding your slide show to your blog sidebar

In your blog's HTML code, find the DIV where your sidebar wrapper begins. The code will look something like this:

<div id='sidebar-wrapper'>

Immedietly beneath this line, paste the following section of code:

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>

Adding your images and links to the gallery

For the next part of the installation, you will need to use your images and the relevant links to your popular/featured posts.

Remember that your images should all be the same size!

Upload all of the images you would like to use to your file host and note down the URLs.

This last step is a little bit tricky, so be sure to double check the code you are replacing and ensure you don't accidentally delete any tags!

1. Copy all of the code below and paste into a simple text editor (eg: Notepad or Notepad ++).
2. Replace all image URLs with those of your own images.
3. Replace all link URLs with the links to your posts.
4. Replace the titles (between the <h3> and </h3> tags) with the titles of your posts.
5. Replace the descriptions (between the <h3> and <h3> tags) with a brief description of your posts, preferably a short one-liner.

Once you have made all these edits (and checked that you haven't accidentally deleted any tags!), copy this entire modified section of code to your clipboard and paste this below the final </script> tag which you recently added in your sidebar.

Now, preview your template. If all has gone well, you should see your slide show appear in the sidebar. This initial installation will add a timed slide show where your images will change every three seconds.

Once you are sure you have installed this slide show correctly, you can proceed to save your template.

Change the "timed" slide show to a manual one

If you would prefer your readers to choose when the next slide will come into effect, you need only make two small changes to the script for your SmoothGallery installation.

Find these lines in your template code:

timed: true,
showArrows: false,

timed: false,
showArrows: true,

Now when you preview your template, you will see semi-transparent arrows in your slide show which become opaque when your mouse hovers over them. Clicking on these arrows will take you to the next slide in the show.

Changing the dimensions of the slide show

If you would prefer your slide show to be a different size than 200x100 pixels, you will need to change all of the images you use to this same size.

Then find this section of code in the <b:skin> section of your blog template:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Credits

The original SmoothGallery scripts was developed by JonDesign and Mootools. Both the original scripts and those featured here are provided under the GNU General Public license.

Final Thoughts

Here at Blogger Buster, I use SmoothGallery to create a slide show of featured posts in my sidebar, but you could just as easily use this to create a stylish gallery of your photos with captions, or an animation of products in your blog.

I hope you have found this tutorial to be useful to you (despite being a little complicated!) and would love to see how you use this in your own Blogger powered blogs.

A Bit About This Widget

I've been looking for a working method of styling the subscriber count in Blogger for a long time. Wordpress users have the advantage of installing a PHP based plugin to accomplish this with ease, but as many of you will realize, such support is not available for us to use in Blogger templates.

After endless searching, I finally came across the Conflagration plugin which was written by Garret Albright. While this was essentially written for Wordpress blogs, this script has one advantage which enables it to be used in Blogger powered blogs too: the ability to call the subscriber count using JavaScript!

By stripping the contents of this plugin to two essential files, I was able to parse and display my own subscriber count as a simple textual number, then style this nicely with CSS.

Important Considerations (you must read this before trying to install your widget!)

The most important thing to consider before installing this hack is whether you have an external hosting account where you can upload and access PHP files. I imagine that many of you will not already have such hosting available to you, though luckily I have been able to find a few decent free file hosts which do host (and allow access to) PHP files:

• AtHost.net
• BytheHost
• Tripod

All of these free hosts offer support for PHP; you will be required to register your details in order to access this free webspace and may need to wait for verification of your account before you are able to upload the required files for this hack. These free hosts do state that this free hosting is ad-supported, though this is nothing you need to worry about as it won't affect how the script displays your feed count!

Once you have access to a file host which offers support for PHP, you're ready to customize your own Subscriber Count widget.

How to Create Your Own Subscriber Count Widget

In this section, I'll explain what is necessary to display your feed count, and afterwards will offer some examples of how you can customize this.

There are 5 main steps to creating your own Feedburner Subscriber Count widget:

1. Activate Remote Access to your Feedburner Traffic Data
   
   By default, remote access to your Feedburner traffic data is disabled. You will need to activate remote access to create and display your own feed count widget.
   
   To do this, log in to your Feedburner dashboard and choose the name of the feed you wish to access. Then click on the Publicize tab, and look for the Awareness API option in the left sidebar menu.
   
   Finally, click on the "Activate" button to allow external access to your traffic data.
2. Download the required files for your widget
   
   Next you will need to download the files you need to make this widget work:
   
   Download Feed-Count-Display Files
   
   Unzip the files to a location on your computer, maintaining the same file structure of these files as you will soon need to upload these to your host.
3. Edit the Config.php File to include your personal feed data
   
   This is the tricky part. You will need to edit the Comfig.php file to include your personal Feedburner ID number.
   
   The easiest way to get this number is to log in to your Feedburner dashboard and click on the name of the feed you are interested in. Your ID number is the number at the end of the URL in your browser address bar:
   
   
   
   Copy this number from your address bar. Then open Config.php using your favorite text editor (eg: Notepad or Notepad++).
   
   In this file, you will need to locate the following line:

   FeedID1:1268073

   Replace this number with your own Feedburner ID number and save the file.
4. Upload all of the files to your hosting provider
   
   You now need to upload all of the files contained in the Feed-Count-Display folder to your hosting provider. Use FTP to upload the folder wherever possible as this ensures the file structure is maintained. If you need to upload each file individually, you must make sure you create a folder named "Data" (with a capital D).
   
   Make sure that the "Data" folder is writable by the server. This means that you should set the folder permissions to the numeric value 755. Or in other words:

   Owner permissions: read, write, execute
   
   Group permissions: read, execute
   
   Public permissions: read, execute

   This means that your subscriber count can be written to the folder each day, ensuring that this value is kept up to date.

Once you have completed all four steps, you can check that the scripts are working and display the true value of your subscriber count.

To do this, visit the "js.php" script where it is hosted on your server, by entering the URL of this file in your address bar, lik