Recent Posts Widget with thumbnails –updated

Recent Posts Widget with thumbnails

Last time we served you the Latest Technology News widget, this time we came out with an easy to install, with thumbnail preview, much faster loading time and highly customizable widget for your recent blog posts. This widget was implemented on this site that you will see installed on the right sidebar.

Besides from the common Recent Post widgets that you will find on a simple googling which will likely suggest you a complicated manual code installation, fixed widget design and ultimately slow-page load due to external JavaScript processing –this widget loads much faster and can serve a do-it-yourself customization and installation.

It acts like a normal feed, because it’s based on Feed2JS framework modified to display image preview, titles, and description of your posts. The installation can be done in just a minute including the customization.

Here are the simple steps to customize the widget. I’ll give Blogger as the example blogging platform for this guide.

  1. Go to this Recent Posts Widget with thumbnail code generator page.
  2. Enter the web address of the RSS Feed (must be in http:// format, not feed://).
  3. Select radio button, to show channel and display information about the publisher of the feed. If you select yes, it will show the title and description of your blog, if title; displays title only and no if you do not want to display anything.
  4. Enter the number of items to be displayed, entering 0 will show all available items on your feed.
  5. In the “Show/Hide item descriptions? How much?” enter ‘0’ to show no description for each item, enter ‘1’ to show full description, enter any value greater than 1 that correspond to number of characters in the description, i.e. 100 to show first 100 character of the description and entering negative value will display the whole item contents with no links and images.
  6. Select ‘n’ to open in same page when a user click the image or links on your widget then ‘y’ to open it on new window. If you want a more advance option you can enter your defined iframe name to open it on your designated iframe and a popup window option by using this JS function to open it on a new window.
  7. Lastly fill up the check button, to force UTF-8 Character Encoding if you see strange characters replacing quotes in your output, mostly required for many non-western language web pages.
  8. You can try to fix and match using the “preview feed” button so you can test it one by one, and in time that you have come to the design you want you can now hit the “Generate JavaScript” button.
  9. You will see the generated code; you may now copy and paste it on your blog.

Blogger Installation:

  1. Go to your Blogger account; select the blog you want to add the Recent Post Widget with thumbnails.
  2. Select Layout tab, and select “Add a Gadget”, a popup window will show then find and select “HTML/JavaScript”.
  3. Fill up your desired title I suggest “Recent Posts” title. Incase that you selected the feed publisher information like the title and description you can leave it blank.
  4. Copy the generated code and paste it on the content area. Then “Save”, then View blog to see if the feed Recent Post is displaying correctly.

Please get in touch if you experience any problems using this widget generator. We accept any inputs and suggestions to improve the service. I hope this helps you all customize the widget to your personal preferences!

UPDATES:
Added image custom resizing for both width and height, this time user can now specify their preferred thumbnail size for each feed unlike the old version. You can go and see the Recent Widget with Thumbnail Generator now and apply this new feature.

UPDATES:
Added further customization options for the widget thumbnail image with the following selections:

  • Border Style – image border can be further customized to dotted, dashed, solid, double, groove, ridge, inset and outset with a default drop down selection of ‘none’ if you don’t want any border style. You can pick and try using the preview button.
  • Border Width (px) – you can also set border thickness in pixel entry fields
  • Border Color – now interestingly you can pick the color of the border to match your website layout.

Bloggers who have questions or suggestions about installing this widget, don’t hesitate to drop your comments below to improve this widgets and service more.

Interested in COG-112 certification? Get guaranteed success in real exam using 350-029 dumps and 350-030 practice exam.

Comments Closed

Comments are closed. You will not be able to post a comment in this post.