Typepad 101: Creating a Sidebar Photo Grid for Featured Posts

The Spotlight Posts module allows you to very easily showcase a category of posts in your sidebar. Today, we're going to show you how to use the module to create a grid of images in the sidebar. This is great if you want to showcase several posts but don't want to take a up a lot of space.

Note: This tip utlizes the Custom CSS feature, which is available at the Pro Unlimited level and above.

First, we need to add a bit of CSS to the blog to format the grid. Go to Blogs > Design > Custom CSS and paste in the following code:

.module-featured .feat-container { margin-top: 0; }

.module-featured li {
    float: left;
    width: 90px;
    border: 0;
    padding-bottom: 5px;
}

.feat-text { display: none; }

.module-featuredposts { margin-bottom: 200px; }

The last line of code is the only part that might need adjusting. If your grid is one line of images, adjust that down to 100px. If it's more than 2 lines, adjust it to 300 or 400px, etc.

Next, go to Blogs > Design > Content and select the Spotlight Posts module. You should choose to show thumbnails with the Left option and deselect the "show excerpt" option. All of the other options can be filled in however you'd like.

After saving, you should see the grid on your blog, like the following screenshot.

That's it! Pretty cool, right? If you use this tip, tell us about it in the comments so we can see.