29 "Popular Posts" widget updated!
August 15, 2007 /

You can now install a new version of the "Popular Posts" widget (the Blog Window widget) from AffiliateBrand.com which has no borders and is completely customizable for your own blog! This is a great new update, since you will now be able to make changes to your widget using the AffiliateBrand dashboard (which unfortunately my customization for the previous version of this widget did not allow). To see the new version of the Blog Window widget in action, take a look at my right sidebar-the only difference from my previous version of the widget is that it now includes a "subtitle" beneath the header!

If you are already using the Blog Window widget, you can easily switch to this new version using the AffiliateBrand dashboard:

  • If you are a member of AffiliateBrand, log in to your dashboard, click "Configure" and then on "Customize" to see the new "No Borders" option available for your widget.
  • If you are not a member (or choose not to be), simply visit AffiliateBrand.com, click on Create/Edit in the left sidebar and input your blog's URL in the box provided. When you submit your URL, you will be presented with the options to customize your widget, and can obtain the Javascript needed from the Javascript link.

Once you have chosen the no-borders option for your widget, you can customize the overall look of your widget using a custom stylesheet. The default stylesheet for the widget looks like this:

The four main elements of the CSS template control the appearance of the following elements in your widget:

  • Title: Configure the font style, font-color and background of the title
  • Anchor (links): This section controls the look and feel of the post titles which link to your most popular posts in the widget window.
  • RowBackground: This alters the background color and style behind the links in the main window.
  • RowCount: This controls the appearance of the numbers which order the popularity of your posts (eg: 1,2,3,4...)

You can control each of these elements using CSS styling as you would for your blog. In the case of the widget used here at Blogger Buster, I have configured my stylesheet to match the other elements in my sidebar, as you can see in the example below:

Once you have created a new stylesheet to match the theme of your blog, you should upload it somewhere online and then input the link to the CSS template in the "configure" section of your AffiliateBrand dashboard. Your Javascript will automatically be updated with this new information, and your widget will begin to look the way you like it! For more information about the Blog Window stylesheet, take a look here.

You can also change the number of posts shown, over how many days the posts are rated, the width and height of the widget, and the title from your AffiliateBrand dashboard.

Once you have customized the appearance of your widget, you should then add the javascript code to an HTML/Javascript element in the sidebar of your blog. If you would like to customize the appearance of the widget even more, you can do so here by wrapping it in <div> tags and specifying the style of the element, as in this example:

<div style="background: #ff0000; border: 1px dotted #ffffff;>script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script>
This would produce a red background with a white dotted border for the widget to sit in! If you're feeling creative you could even customize it to feature a background image!

Once you've installed the javascript in your sidebar, it may take a few minutes for the changes to come into effect. If you have just installed the widget for the first time, try clicking on a few of your posts in order for AffiliateBrand to gather data about them. If you're updating the widget to the "no-borders" version, wait a few minutes and then refresh the page to let the alterations come into effect.

This solution is much better than the manual customization method I discussed in this post. As Gene Kavner (the author of the AffiliateBrand widget and website) highlighted in his comments, the Javascript can be updated easily with changes to the CSS template, height and width etc of your widget whereas the manual customization must instead be changed each time by hand (and it is a rather complicated process!). Also, updates to the operation of the widget cannot be duplicated so easily unless the Javascript version is used. Personally, I prefer this anyway: there is much less code involved, and the widget is ready to be used as it is, which is only good news for busy Bloggers!

Thank you Gene Kavner for producing such a useful widget for us Bloggers, especially as this new version was completed so soon after your initial suggestion!

Technorati Tags: | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

29 comments:

  1. Amanda --

    It was my pleasure.

    I'm glad you are enjoying the Blog Window widget.

    Let me know if you have any additional suggestions!

    Gene [at] AffiliateBrand.com
    AffiliateBrand.com - Home of the Blog Window Widget
    AnalyticsWizard.com - The Most Useful Analytics Report Made Easy

    ReplyDelete
  2. Thank you both Gene and Amanda for providing this widget and for the detailed explanations on how to use it and customize it!

    I just added it to my blog! Thanks!

    ReplyDelete
  3. Thank you. I've been using the widget, but you've helped me figure out how to make it look better. I'll tackle this tomorrow.

    ReplyDelete
  4. I'm from Vietnam. This widget not support for unicode:(
    How about this?
    Thanks
    vungthung

    ReplyDelete
  5. don't know where i can upload/where do i put those css =C anyone help please?

    ReplyDelete
  6. For Joice:

    Sorry if I confused you about this, Joice. Once you have created a stylesheet, you will need to upload it to a hosting account. I wrote about some of the best free hosts in this post, and the comments can also point you to some others.

    Once your stylesheet is online, just add the URL for your stylesheet in the options section for your Popular Posts widget.

    Strictly speaking, it isn't necessary to use a separate stylesheet to make the widget work, but it can help make the style more fitting for your blog.

    Feel free to email me if you need more help.

    ReplyDelete
  7. hey!!! thanks a lot for the help! i now had it customized for my blog! thanks! see my blog at http://paintmeahappysmile.blogspot.com

    ReplyDelete
  8. hey. can you teach me how do i make my background black? or transparent perhaps? =D

    ReplyDelete
  9. HI,

    I tried this widget on my site, but it seems to spend a lot of time loading the content - both when your page first displays and while your displaying an already-rendered page. Any suggestions?

    thanks,

    Randy

    ReplyDelete
  10. Please ignore my previous comment about page loading, I got my widgets mixed up!

    ReplyDelete
  11. Hi, thanks for a great tutorial!

    Unfortunately, this widget doesn't seem to work for non-english sites (unicode). Is there any way to make it work for non-engish sites?

    Thanks!

    ReplyDelete
  12. Hi thanks for this widget..
    But when i add it to my blog ,
    it shows default text in it(and not my popular posts)
    What can be done?

    ReplyDelete
  13. "Hi thanks for this widget..
    But when i add it to my blog ,
    it shows default text in it(and not my popular posts)
    What can be done?"

    i agreed

    ReplyDelete
  14. i did a widget for popular posts as well. What do you think ?

    http://itblood.blogspot.com/2008/11/popular-posts-widget-with-postrank-feed.html

    ReplyDelete
  15. Hi Amanda!
    First, congrats for another great post!
    How did you put that adsense inside your post?
    I tried to copy and paste adsense code inside my text, changing < and > for its elements (&_gt; and &_lt;), but it didn't work for me.
    Could you help me, please?!
    See ya! ;)

    ReplyDelete
  16. Thanks for the another great post amanda....
    Regards,
    Balaji J H

    ReplyDelete
  17. Thanks a ton! i have searched for this widget since a long time and was unsuccessful..!!
    now i have added this widget and its working :)
    thanks again!

    ReplyDelete
  18. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  19. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  20. I think they will get their salary depends upon their strength,experience.

    ReplyDelete
  21. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information. thanks ajoy

    ReplyDelete
  22. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy