Create Colored Widget Boxes Displaying Recent Posts, Popular Posts, and More

On a past blog I owned, I listed my popular posts in the sidebar and styled them in a way that got them noticed.

The styling was so simple, yet so effective in driving traffic to these popular posts that I was receiving more comments and retweets on these posts than any of my others.

I decided that I would write a quick tutorial here on how to apply the same style you see to the right for your own blog.

It’s a good-looking and effective way to drive even more traffic to your popular, recent or random posts (whichever you choose).

Let’s begin.

1. Preparations

Just to get a little prepared here, these are the things you will need for this tutorial.

Once you choose what plugin you want, download it, install it and add it within your Widgets panel. Simple enough preparing, right? As long as you know what you want, the hard stuff is out of the way.

2. The CSS

Depending on the plugin you use, the CSS will be different. But the only difference is the selector that is used, and that is easily changeable. So, the CSS code I use here is pretty simple, but I will explain it:

[css]
#random-posts li {
background: #FFFBCC;
border: 1px solid #E6DB55;
line-height: 1.5em;
padding: .9em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px
}
[/css]

So what we have going on up there is pretty simple. We have a background which will allow you to switch up the color of the box, the border will surround the entire widget, the line height controls the spacing between each line of the link, and the padding is the spacing from the box to the text.

The -moz-border-radius & -webkit-border-radius will make the box rounded without images. They will only be round in Safari and Firefox, but it’s a neat trick to those who can actually see it.

You can change the selector depending on which plugin you used. The other selectors are below:

  • #recent-posts
  • #popular-posts
  • #recent-comments

3. Customizing the output

The New Look of Your WidgetsYou should have the yellow box around the link by default. It looks kind of boring, but because of how flexible this plugin is, making it look better is not a problem at all.

There are a lot of different things you can add to the box to make it look cool. The plugin makes adding things so simple too, and you really don’t need any coding knowledge at all to do it.

So to start, go to Settings → Recent Comments/Recent Posts/Random/Popular Posts → Output → Output Template. This is where we can add anything to the box. Here are a few bonuses you can add to your box to make it look even better:

66×66 Image

This will only work if you use Thesis teasers and have the 66×66 images for each post

You can paste this code into the Output Template box:

[html]

  • {link}
  • [/html]

    NOTE: If you let Thesis auto generate thumbnails, replace thesis_thumb with thesis_post_image in the code above.

    The code calls the thesis_thumb custom field from your posts and puts it into the box. You will also need to add this CSS to make the image look right:

    [css]#random-posts img { float: left; padding-right: 8px; }[/css]

    Add the date and more

    You can add the published date to the widgets as well. The date can be replaces with a variety of things like comment count, views, tags, and a lot more. The code below will show you how to float things to the right.

    First, replace the code in your Output Template with this:

    [html]

  • {link}
    {date}
  • [/html]

    Add this to your CSS:

    [html]#random-posts div.right { color: #baaf2e; float: right; font-size: 11px; text-transform: uppercase; }[/html]

    I added a little style to change the font color, size and case. This will bring whatever you wrap within <div class="right">...</div> to the right. But there will be a bug.

    You will also need to add overflow: hidden; to the very first piece of code you added in Step 2. When the image is in the box floating, it will overlap the box, making it looks really weird.

    So, by adding that line to your CSS, it will make it look right, and the text will be inside of the box again.

    Simple Enough, Wasn’t It?

    That was pretty simple wasn’t it? The plugins used in this tutorial are extremely powerful, and allow you to customize your output extensively.

    I hope you enjoyed this tutorial, if you have any questions then feel free to leave a comment below!

    5 comments add yours

    1. You make it look easy bro keep it coming in. I would like to share a video post to give a visual walk through of the process

    2. a little complicated for some people to understand but good article its of great use ….btw i have used the related posts widget on my blog just check it, its good.

    Leave a Comment