Wednesday, 12 March 2008

Removing your name from the Top Commenters Widget

Important Update: You can now remove your name from the list using the revised widget installer for the Top Commenters widget.

This means that you don't need to follow the instructions below, though they will remain as a reference point for anyone using Yahoo! Pipes to create their own applications.

The Top Commenters Widget enables you to display the names of the top ten people who comment on your blog. However the default installation does not remove your own name from this list.

Here are the instructions to follow which will enable you to remove your own name from the list. This does require you to make some customizations to the Yahoo Pipes application which is used to generate the widget, but I'll take you through the process step by step.






Assuming you have already installed the Top Commenters widget in your blog, you will probably see your own name in this list. To remove your own name from this list, you will need to apply a filter to the Yahoo Pipes application used to parse and display this list.

There are essentially three steps to this process:

  1. Make your own copy of the Yahoo Pipes "Top Commenters" application.

  2. Filter your own name from this application.

  3. Change the reference number in the widget code to match that of your own application.

It is not difficult at all to make these changes, and should take only a few minutes to achieve.

Instructions

You should have already installed the Top Commenters widget in your blog, so if you haven't already added this, please do so now as it will make things much easier for you to understand!

Making a copy of the Top Commenters Application in Yahoo Pipes

This step is much easier than it sounds! Simply visit the page for my version of the Top Commenters widget. You will be prompted to enter your Yahoo! login information to see this pipe. If you're not already a member of Yahoo! you can create a free account in minutes to begin working with this application.

The page for this pipe will look something like this:

To make your own copy of this application, all you need to do is click on the "Clone" link as highlighted in the image above.

On the next page, you will see the output of the pipe application (the top commenters on Blogger Buster), along with some configuration options near the top of the screen.

Here you need to click the "Edit Source" link, as shown in the image below:

This link will take you to the page where you can add your filter to the application.

Filter your Name from the Pipe Output

For those who haven't used Yahoo! Pipes before, the next screen may be rather intimidating! There are many different boxes and options on the screen, though there is only one which you need to alter: the one which says "Filter your name" as shown in the image below:

As you can see in the example above, I have filtered my own name from the Top Commenters widget by adding my name into the text input box.

Simply replace "Amanda" with your own name (that which would normally appear as your name in comments). Then click on the "Save" button at the top of your screen.

Edit: While this method worked fine for me while testing, many of you have experienced problems in filtering your name from the list. There is one extra step you can take to ensure your name will be properly removed from the list.

In the pipes editing screen, you will notice a box marked "Blog's URL (Text)". In this box, remove both instances of the URL for Blogger Buster, and replace this with the URL of your own blog, like this:

http://yourblog.blogspot.com
or
http://www.yourblog.com
Be sure NOT to add a trailing backslash to the end of your URL as this will prevent the pipe from working properly!

The Blog URL box appears like this in the template, with the boxes for the URL input marked for your convenience:

Once you have changed the URL, be sure to save your pipe.


Change the reference number in your widget's code

This is the trickiest part of filtering your name from the Top Commenters widget, but so long as you are careful you should experience no problems.

Your own copy of this application has a different reference number to that which is currently installed in your blog. To filter your name from the widget list, you need to change the reference number to match that of your own widget.

Firstly, you will need to extract the ID number of your new application. You can find this easily by looking in the address bar of the page you are on (providing you have not changed location since saving your pipe). I have highlighted an example of how this would appear in the image below:

Copy only the number string from your address bar to your clipboard. An alternative way to extract this ID number is to go to My Pipes, click on the link for your copy of the Top Commentator widget, and look for the "Pipe Web Address" which should be just beneath the description of the pipes application.

With this long number saved to your clipboard, go to your Blogger dashboard and click on the link to edit the contents of your Top Commentators widget.

Here is what the code inside your widget should look like:

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol>');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = '<li>' + '<a href=" + href + ">' + obj.value.items[i].title + '</a> </li>'

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_
render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&url=
http%3A%2F%2Fwww.bloggerbuster.com&num=10" type="text/javascript"></script>

I've highlighted the existing ID number in yellow. You need to replace this with your own unique ID for your newly edited pipe. Be careful that you only replace the ID number, and don't accidentally delete or move any other section of code!

Once you have changed the ID number, simply save the changes to your widget and take a look at the widget in action in your blog. You may need to refresh the page to see your changes in place, but if all has gone well, your own name will now be omitted from the list!

I hope this tutorial helps you all to filter your names from the Top Commenters widget easily and without problems. If you do experience problems with this, feel free to leave your comments below and I'll get back to you as soon as I can.


Monday, 10 March 2008

Top Commenter's Widget for Blogger Blogs!

Would you like to display a list of the top commenters in your blog? This widget will enable you to do exactly that! If you install this widget, a list of the top ten people who have commented most in your blog will be displayed with along with the count of comments they have made.

This is a great way of thanking readers who comment regularly and is very easy to add to your blog layout using the one click widget installer






To install this widget in your own blog, simply change the title to suit your preferences and alter the URL to match that of your blog.

If your blog has a Blog*Spot URL, you should enter your URL like this:

yourblog.blogspot.com

If you use a custom domain for your blog, simply enter the URL of your blog's domain.

In either case, do not add the "http://" part! This is already rendered by the script used to display the commenter feed.

If you would like to remove your own name from the list, enter your name in the "Filter Your Name" box.

Use the form below to add this widget to your own Blogger powered blog:

This widget is based on the Top Commentators Widget for Blogger which was created by Assess My Blog. It uses Yahoo Pipes to process the last 500 comments made on your blog, and displays a list of the ten people who have commented the most in this range.

Each name is linked to the most recent comment on your blog made by this person (since it would be very difficult to create a generic script which would work for all blogs and comment settings!).

Update: I have now added an extra element which allows you to remove your own name from the list of Top Commenters (thanks to Carrotmadman6 for the tip!).

I have tested this extensively in IE6/7 and Firefox and in these browsers the script and display work just fine. If anyone notices a glitch or problem in other browsers, please let me know so I can work on solving the issue.

If you find this widget useful, please tell your friends or bookmark this post using your favorite service. I have worked long and hard to create this installer and really appreciate your help in spreading the word about this new tool :)


Sunday, 9 March 2008

Weekly Review #9

I hope you all like the new look for Blogger Buster! Over the past couple of days, I've been ironing out the glitches in the template and have changed a few other things which you can read about below.

This week, I've discovered some really useful tools and resources for Blogger. I've also begun writing up tutorials about various aspects of the new design to help you recreate similar effects in your own Blogger templates.






Blogger Buster News

Of course, the big news for the site this week is the new template design. If you're reading this post via RSS I would really recommend for you to visit the site to take a look at how much Blogger Buster has changed!

There were a few glitches in the template, though hopefully these are all now fixed.

I've added a couple of new features in the past few days including:

  • A tour of the site for new visitors, which gives an overview of Blogger Buster and explains some of the major features of the new template. You can find a link to this in the navigation bar beneath the search box, and also on item pages.

  • The Home Page has changed a little to ensure there isn't such a great gap between the bottom of the page and the footer sections (thanks for the suggestion Dr Wiz!)

The "links" page is still inactive as I'm still in the process of writing this up. Eventually, this will be a resource page full of useful links related to Blogger, blogging and template design which should be available midweek.

As you may have noticed, all templates and tools are now accessible through the home page and are contained within this area of the site. The original sections for templates (http://designs.bloggerbuster.com) and tools (http://tools.bloggerbuster.com) are still available if you wish to use them, but will no longer be updated and will eventually be depreciated as everyone updates their bookmarks to the new locations for these features.

SEO for Blogger Templates series

Over at Blogging Tips I've been writing about search engine optimization techniques for Blogger templates. The first and second posts are available for you to read right now, while the third in this series will be available tomorrow.

I'm happy to say that I'm now a regular writer for Blogging Tips, and will be posting about Blogger and blog template design each Monday from now on.

Blogging Tips is full of useful articles and ideas for bloggers and has a great writing team, so please pop over sometime to read what this site has to offer the blogging community.

Upcoming Articles

Those of you who have kept up with me on Twitter may be wondering about the tool I've been using to backup, restore and import Wordpress posts to Blogger... This post is currently in the pipeline and will be posted in the next day or two.

Also, I will continue to write tutorial posts explaining how to install and use the new features included in this template.

I do apologize for not having written anything for the Blogger Template Design series recently. I'm sure you all understand how busy I've been with the redesign and other projects, and can assure you that this series will continue with at least two posts over the coming week.

Blogger News and Issues

Did anyone else notice the bug with all Blogger powered blogs yesterday? For a while, all blogs hosted by Blogger seemed to load extremely slowly, or wouldn't load at all! Thankfully, the Blogger team were on the case within minutes and had soon sorted out the problem for us all, and by now everyone's blog should load just fine.

The problems people were experiencing with custom domains earlier this week have also been resolved. If you were experiencing problems establishing your custom domain, you can try again now as everything seems to be working just fine.

This Week's Links

Here's a selection of the sites and articles I've been reading this past week:

  • Vote for Blogger! Blogger has been nominated for "Best Publishing and Photography" site in the 2008 Webware awards.

    Voting is open until the 31st of March and winners will be announced in April 21st.

  • ShareThis Plugin for Blogger: The popular service, ShareThis has now created a widget style plugin for Blogger users. This will add a ShareThis icon to your posts which allows readers to easily add your posts to their favorite social bookmarking service or email complete posts to their friends.

    You can also use this widget to receive detailed statistics about the performance of both the widget and your blog in general.

  • Smashing Blog Headers: Smashing Magazine has some truly awesome blog headers available for free download, which have been offered by creative readers of this site. There are some real beauties here, so if you need a new header image for your blog, be sure to check out this selection.

  • Building a Page for First Timers: This excellent post by ProBlogDesign is what inspired me to write the "Tour" page for Blogger Buster. In this article, Michael Martin explains how to write a page specifically for new visitors and why such a tactic can be effective for your blog. This is really worth a read and may even inspire you to create your own!

I hope you have enjoyed this week's review. Be sure to let me know if you have any suggestions for next week, and feel free to leave your comments and opinions below.


Saturday, 8 March 2008

How I Customized the MyBlogLog Recent Readers Widget to Match my Blogger Template

The "Recent Readers" widget you see towards the bottom of the sidebar is powered by MyBlogLog. Here you will see the avatars of MyBlogLog members who have recently spent some time here reading the Blogger Buster blog.

The default MyBlogLog widgets didn't fit in too well with the style of my new template, so I decided to customize this using CSS to hide the parts I don't want to display.

In this article, I'll explain how I achieved this. It's quite a simple technique to try out if you'd like to use - and customize - your own MyBlogLog Recent Readers widget too.






For this tutorial, I'm going to assume that you're already a member of MyBlogLog. If you're not yet a member, you may well want to sign up to MyBlogLog and begin using this excellent (and free!) community based service to help build traffic and a community for your blog!

Once your a member and have registered your blog, you'll need to create the code for a Recent Readers widget, which you can use in your sidebar. To do this, visit you profile page, and click on the "widgets" link for your blog. In my own MyBlogLog dashboard, this link appears like this:

Now, MyBlogLog have recently introduced a shiny new widget, which has some great functionality. But this is not the widget we need to use for this tutorial! You need to use the "Crusty Old Widget" instead!

At first, the "crusty old widget" will look like this:

On this page, you'll need to make a few customizations to the appearance of your widget:

  • Change all of the colors to match the background color of your sidebar.

  • Change the width of the widget if you need to make this narrower or wider to fit neatly inside your sidebar.

  • For the "Show Screen Names" option, check "No".

Once you've made this necessary changes, click the button which says "preview and get code".

Copy all of the code to your clipboard, then insert into an HTML/JavaScript widget in your blog.

At first, this widget will still look a little disorganized: we need to add a little code to the style section to finish things off.

So go to Template>Edit HTML in your Blogger dashboard, and search for the closing <b:skin> tag.

Immedietly before this tag, paste the following section of code:

table#MBL_COMM td.mbl_fo_hidden {

display:none;

}

table#MBL_COMM td.mbl_join_img {

background: url(http://bloggerbuster.com/images/blank.gif);

}

table#MBL_COMM td.mbl_join {

background: url(http://bloggerbuster.com/images/blank.gif);

}

table#MBL_COMM tr#tr0 {

background: url(http://bloggerbuster.com/images/blank.gif);

display: none;

}

table#MBL_COMM th.mbl_h {

display:none;

}

Now when you preview your template, you'll notice that all the unwanted parts of the widget are hidden; your widget should blend perfectly with your template featuring only the avatars of your recent blog readers.

If you would also like to add the links for "View Reader Community" and "Join This Community", you can add the following code inside your recent readers HTML/JavaScript widget, changing the values in red to match those of your MyBlogLog community profile:

<center><ul><li><a href="http://www.mybloglog.com/buzz/community/YourCommunityName/"
title="Visit the MyBlogLog Community">View the reader community</a></li>

<li><a href="http://www.mybloglog.com/buzz/yjoin/?ref_id=[your community ID#]&ref=w"
title="Do you want to be a part of this community?">Join this community</a></li></ul></center>

To find these values for your blog's community, go to the "Settings" page for your blog.

The URL Display Name is the value of YourCommunityName, while that long number at the end of the URL in your address bar is that of [your community ID#].

With this new feature in place, you'll be well on your way to creating a customized and wholly stylish look for your blog!

I hope you've enjoyed this tutorial. Feel free to post your comments and questions below.

If you'd like to learn about the other customizations I've made to the Blogger Buster template, be sure to subscribe to the feed to receive news of updates as they are posted.

Friday, 7 March 2008

Blogger Generates a Sitemap for Your Blog

While checking out Google's Webmaster Tools, I noticed something rather interesting about sitemaps for Blogger:

So I checked it out for myself, and I'm happy to say that it works! What's more, other search engines can easily find your sitemap too...






So how does it work?

Blogger generates a "robots.txt" file for every blog automatically. This tells search engines which directories they are disallowed from, and includes the location of your sitemap. When your site is crawled by search engines, they find the location of your sitemap from the robots.txt file, and are able to update their databases with the posts they find here.

The robots.txt file for Blogger Buster looks like this:

User-agent: Mediapartners-Google

Disallow:



User-agent: *

Disallow: /search



Sitemap: http://www.bloggerbuster.com/feeds/posts/default?orderby=updated

As you can see from this example, Blogger use the default feed (ordered by the last post update) as the sitemap for your blog.

This helps search engines find your most recent posts. It's quite useful as this means you don't need to fiddle about telling Google and other search engines about your sitemap.

You can take a look at the robots.txt file generated for your own blog by going to http://yourblogname.blogspot.com/robots.txt, substituting "yourblogname" for that of your own blog. If you use a custom domain for your blog, this will be located at http://www.yourblogname.com/robots.txt instead.

I'm happy to know that Blogger now include this sitemap in the robots.txt files for our blogs. It certainly saves us a lot of time trying to submit sitemaps to other search engines!

Thursday, 6 March 2008

All About the New Look for Blogger Buster

First of all, I just want to say a great big THANK YOU to everyone who commented or emailed me about this new design :)

I'm really happy to know that you all enjoy this new look, and hope you'll find the site is now easier to navigate to find the information you need.

Now that the Blogger Buster makeover is almost complete, it's time to explain all the changes which I've made. Over the next few weeks I'll be writing up tutorials for most of these features, so if there's anything I've missed out be sure to let me know!






The Header Section

Many of you will recognize the overall layout of the header section from the Blogger Template Design tutorial, The Easy Way to Create a Great Blog Header.

I hope my design shows how the space in the header section can be put to good use!

The New Logo

The old BB logo didn't feature any indication of what this site is all about, so this was the first thing I redesigned!

Now it's instantly recognizable, though it still features the original red "B" which is part of the Blogger Buster "brand"!

The new font used for "Blogger Buster" is 321 Impact which you can download for free from DaFont (a great site for free fonts!)

Twitter Updates

I've recently discovered the benefits of using Twitter: not only can i keep you updated about the site, I'll be using tweets as "mini posts" to let you know of other interesting things too!

If you like, you can follow my updates on Twitter, or simply check back here to see what else I may have twittered.

Search and Navigation

The customized Blogger search box and the iconic navigation list are two features I've already posted about in the Blogger Template Design Series. Using these methods, I made these features match the overall color scheme of the site, and draw attention to important links.

Note: the "links" link is currently inactive because I haven't yet finished writing the page where this is going to lead. But it will be online and available soon. This page will be worth the wait, believe me!

The Main Posts Area

As in the previous template, the main content area has a paper style background with the page curl. But on the home page, you've probably noticed a vast difference in the overall design layout!

This is the area where I focused on creating a "magazine style" for the blog. The main thing I love about magazine styling in other (Wordpress powered) templates is the ability to have recent posts from various categories listed on the front page in grid/box areas.

I was able to recreate this in Blogger using label feeds of the main categories, which are highlighted with the sideways category titles. The "recent posts by category" section only appears on the home page (using conditional tags), along with an excerpt of the most recent post, which was achieved using the selective post summaries hack.

I would have preferred to show a different icon or small image relating to each post, though this has proven quite difficult so far. Instead I'm working on a different idea, which of course I will share if it works!

A Better Post Options Box on Item Pages

While I still use the 'post options' box on each post page, I decided it was better to add social bookmarking links here instead of the unused "Email this Post" and "Contact the Author" boxes.

New Sidebar(s)

The old style sidebar was getting too long, and the available space certainly wasn't being put to good use. So after a long time thinking about what I needed here, I decided to split the sidebar into two, while maintaining a wider section across the top which includes the most prominent features.

The "Featured Posts" Slideshow

Of all the new features I've introduced int he redesign, this is the one I love the most!

I first saw this used in Justin Tadlock's latest Wordpress theme and was instantly inspired. This "slideshow" is powered with JavaScript, rather than Flash, which ensures it's friendly to search engines. It did need a few tweaks to display properly in IE6, but it's not as difficult to use as you may think ;)

As it stands, this "widget" is coded into my actual template. It doesn't work when placed into an HTML/JavaScript widget for some reason, though by the time I come to write up the tutorial for this, I hope to have made it a little more user friendly for you all!

Do You Like The New Blogroll?

On my home page, you can now see my "blogroll": a list of the sites I read daily in regards to blogging/designing. All of these links have a recognizable icon to the left, and the links are well optimized for search engines: my way of generating a little 'link love' for these inspiring and well-written sites!

The Labels List

As part of the redesign, I have filed all the posts under a better labellings system, which should help you find posts of interest more easily. Furthermore, I've optimized these links for search engines by adding titles to the links, and styled each list item in a different way to other lists in the sidebar. You can read about the SEO for links in Blogger templates in the article I wrote for BloggingTips.com.

Feedburner Subscriber Count Widget

Here's another feature which I'm rather happy about: the widget which displays my subscriber count in the bottom of the left sidebar. The count updates daily (usually a few hours after Feedburner's update on my stats) and is generated using PHP and Javascript with a background image. It's a fairly simple widget to use, though I will warn you all in advance that you must be able to host PHP and Java scripts for this to work in your own templates.

The MyBlogLog Recent Readers Widget

Now while the new MyBlogLog widgets are lovely and shiny, they just didn't fit well with my overall theme! Using a little CSS magic, I was able to customize the original widget to better suit this site. This trick is really easy to do, and will probably be one of the first tutorials I write up (unless you have some burning questions about the other features which you'd like me to post about first?)

Known Issues

There are still a few things to finish or fix, including:

  • The "Links" link in the header navigation is currently inactive (I haven't finished writing the page for this yet!)

  • Both the Templates and Tutorials links in the header will soon lead to seperate resource pages, where all tools and templates will be listed on a single page.

  • In Netscape 6, the footer sections may slip beneath the sidebar, which shall be solved as soon as I can figure out the problem (thanks to Kit for pointing this out!)

I'll solve these issues as soon as I can. In the meantime, if you notice any other problems with the site, please let me know about them!

So What's Next?

Over the next few weeks, I'll be posting about all of the features above as part of the Blogger Template Design series so be sure to subscribe to the feed if you're interested in using these techniques in your own Blogger templates!

Should I create a Magazine Style Blogger template for download?

This is something I've been mulling over for a while now. I'd love to offer a free magazine style theme for Blogger, but like all Wordpress themes of this type, anyone downloading and using such a theme would need to do a huge amount of customization for themselves. It's simply not possible to create one which will work right out of the box!

So let me know what YOU think! Are there many who would be willing to go into the template code, change certain settings and (perhaps) learn how to write their posts a little differently for the sake of a magazine style theme? If enough people ask me for this, I will be sure to create one, though this may well take me a couple of weeks to write up!

I hope you've enjoyed reading how I've created this new template. If there's anything I haven't covered here, or a particular feature you'd like me to write about first, be sure to let me know by leaving your comments below.

Monday, 3 March 2008

Today's The Day: Uploading the New Blogger Buster Template!

This morning I am uploading the new "magazine style" template for this site!

Update: unfortunately the post footers didn't transfer as easily as I'd hoped. Some of the links may look odd and may not work at all at the present time. Sorry if this causes any problems, I'll get on with the fix as soon as I can!

For the next hour or so, you may notice things look a little odd as I upload all of the new widgets and configure the template to appear the way it should be. During this time, all of my existing posts will be accessible, though the sidebar and home page will probably look a little odd!

Please bear with me for a while until the reconstruction is complete. Once the update is complete, I'll post a full explanation of the changes which have been made, and of course I would love to know your opinions on the new look!