How to Add Recent Posts Widget in Weebly?

A recent posts widget contains links and excerpts of recently published articles from your Weebly blog. You can boost the traffic to your blog by adding recent posts widget in the sidebar. Also you can add the widget on the footer to showcase the content site wide or add it after the content of each blog posts independently. In this article let us explain how to add recent posts widget in Weebly in the following two ways:

• Using Weebly’s default Feed Reader element.
• Using one of the third party feed readers like Feedburner.

Weebly Blog Feed URL

Before going to the recent posts widget, ensure the following two things:

• You have a separate blog page on your site containing blog posts. Recent posts can only be shown from the blog feed. Standard pages can’t be used as there will be no feed for the regular pages you create.
• Ensure to have at least few blog posts created before trying to add recent posts widgets.

When you have a blog page with published posts on your Weebly site then Weebly blog feed URL will be:

https://yoursitename.com/1/feed

If you have multiple blog pages then the feed URL should be like:

https://yoursitename.com/2/feed

https://yoursitename.com/3/feed

Remember the above feed URLs will work only if you have not changed the blog page name. Let’s say you have the blog page with the name “Advise” then the feed URL should be like below:

https://yoursitename.com/advise/feed

Finding Weebly Blog Feed URL

The easy way to find your RSS feed URL is to use default “Blog Feed” element on the blog sidebar.

Publish your site and click on the RSS feed link to find out the correct URL for your blog feed.

Creating Recent Post Widget Using Blog Feed Element

Weebly does not offer an exclusive recent post widget element. But you can easily create recent posts using the available “Blog Feed” element (earlier known as Feed Reader). Drag and drop the “Blog Feed” element wherever you want on the blog. It can be added anywhere on your site – blog sidebar, footer or inside content area. Remember the “Blog Feed” element is part of “Blog Sidebar” that will appear only when you select the blog page for editing. Blog sidebar elements will not appear on the standard page editor.

Once the element is added, by default Weebly will show the feed from CNN (or any other external site) like below.

Click on the feed to see additional options.

• Replace the “http://rss.cnn.com….” URL with your own blog feed URL.
• Adjust the width of the widget based on your need to one of the available options – small, medium, large, Ex-large or 100%.
• Set the position and margin spacing as you need.

Controlling Number of Items and Excerpts

The “Advanced” section has two options:

• # of Items – Choose the number of post links to be shown in the recent posts widget. We recommend to show 4 or 5 recent posts from your blog.
• Text Length – Choose whether to show first few lines from the post in the widget. Choosing “None” will remove the description and show only blog post’s titles. Based on the theme’s sidebar width, you can choose to show short, medium or long text length. We don’t recommend to show “All” text length unless you choose the number of items as one.

The final recent posts widget using “Blog Feed” element will look like as shown below. Weebly will automatically determine the title of the widget by adding site title and blog page name.

Customizing Weebly Blog Feed Element

You can customize the borders, colors and fonts using simple CSS. The corresponding CSS classes for Weebly blog feed element is shown in the below picture. For example, if you want to change the font size of each item’s title add the CSS code .rss-item a{font-size:16px;}. Learn more on how to add CSS code in Weebly.

Creating Recent Posts Widget Using Feedburner

We would highly recommend to use the default “Blog Feed” element to add recent posts widget. But if you don’t like the widget for any reason then there are plenty of third party feed readers available to create such widget. Here we explain with Feedburner but you can use any similar feed reader for this purpose.

Before starting, read our article on how to create Feedburner feed for your Weebly blog. Also if you have custom domain then read our article on how to create Feedburner feed with your custom domain.

Once you have a valid feed created in Feedburner, navigate to “BuzzBoost” section under “Publicize” tab. BuzzBoost is the free tool which will convert your blog feed into an HTML output. Just copy the code and paste it inside an “Embed Code” element anywhere on your Weebly site.

Publish your site to see the recent posts in action like below.

Customizing Feedburner Recent Posts Widget

Feedburner has lot of options to customize the look and feel of your widget under “Feed Settings” section.

• The feed title when entered will be shown on top of the widget as a heading with link to the site URL.
• Use display item content as full HTML to display “Email this”, “Add a comment” and “Share on Facebook” links below each post in the widget.
• Use display item content as plain text to and adjust the length of the excerpt.
• Control the number of items to be shown in the widget and the link should open in same or new window.
• Display the author name below each title, but Weebly will automatically take the account name as author name. In this case it may not be useful to show the same author name for all posts in the widget.
• Display a link to blog feed so that users can directly click on the link and subscribe to your Feedburner feed.

Below is how an individual post in a widget will look like after customization. Any changes you do in Feedburner account will be automatically applied to the widget on your Weebly site.

Using Multiple Blog Feeds

Both “Blog Feed” element as well as Feedburner can be used for creating a dashboard like page with multiple blog feeds. Assume you have a real estate site having 4 blogs to showcase properties on four different regions like Texas, New York, California and San Francisco. Now you can create four recent posts widget and showcase it on the home page as a dashboard like below: