Typepad 101: Utilizing the Feed widget to display your content

August 20, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tips here are suitable for bloggers at varying levels, from basic to intermediate. Need tips on how to make something work for you? Leave a comment! Your Support team and fellow Typepad bloggers are always here to lend a hand.

In a previous post on utilizing your blog's feed we mentioned using a combination of the RSS/Atom Feed module with a feed for a specific category, which will display a list of your 5-10 most recent posts published under that topic. What if, instead of categories, you have multiple blogs, each relevant to your main blog but which requires its own separate presence? What's the best way to display content among them? Believe it or not, it's the same module!

For fun, let's say you're a member of the Typepad support team. You have your own blog, but occasionally write posts for this blog, Everything Typepad. Since a lot of work goes into both, and you think the content is relevant and of interest to your blog's readers, you want to showcase recently published posts from that blog in the sidebar of your own.

First step to take? Copy the URL of the blog's Atom or RSS feed. Once that's copied, all that's left to do is to add it to your blog at Design > Content, adding the title you want to display to readers, as well as selecting whether to choose 5 or 10 titles. After your choices are made, just Preview and Save Changes.

Now the feed looks like this in your sidebar:

Not bad. What if you really want the content to be noticed? Slap some CSS on it:

Not too shabby, and there's no way it would go unnoticed. Now your readers have additional content to peruse, which they know has been vetted by you, and it's extremely easy to find!

Tip: Remember, if you don't see a Custom CSS option on the Design tab for your blog, then you'll need to upgrade to the Unlimited plan in order to make stylistic changes like these.

Interested in the CSS used to make the above style changes? Here you go:

.module-feed {
    background: #02849C;
    padding: 10px !important;
    }

.module-feed .module-header { color: #fff; }

.module-feed #feed-4d659630bbab3d188930465f65e0baa041885bbb {
    border-top: 1px dotted #fff;
    background: rgba(255, 255, 255, 0.3);
    }

.module-feed .module-content { margin-top: 10px; }

   .module-feed .module-content li { padding: 5px 10px; }

      .module-feed .module-content li:nth-child(even) { background: rgba(0,0,0,0.1); }

         .module-feed .module-content li a { color: #fff; }

Note that the third selector and ID (#feed-#...) uses an oddly formatted identifier name; this is the custom feed ID that is generated when you add a module of its kind to your blog. If you have more than one, each module will have its own unique identifier wrapped around the content (not the module, just the content). This allows you to target a specific feed and make changes to each so that they stand apart from each other.

For example, if I were to add the category feed for Everything Typepad's "Tips and Tricks" category, with the above styles in place, it would look like this by default:

That's because the styles for the dotted border above the links, as well as the background color (white, set to 30% opacity), are only applied for the original feed, not all feeds.

To find the unique ID for a feed, view the source of your blog after adding the module (you can view your blog's source by right clicking anywhere on the page, and choosing "view page source"), and look for the title you set to display. Once you've located it, copy the ID and paste it somewhere safe for later use.

That's really all there is to showcasing additional work authored by you in the sidebar. Have you worked out your own method for sharing or styling posts authored elsewhere? Make sure to tell us all about it in the comments or over in the community forum!

03:58 PM in Typepad University | Permalink | Comments (1)