Recent Posts Widget for Blogger will display the latest posts from
your blog on your blog’s sidebar along with images, summary and more.
You can customize the widget using the different options provided in the
widget installer.At least some of you would be familiar with My “Recent
Posts with Thumbnails” Gadget for Blogger. I had got so many complaints
that the Gadget fails to load or has some issues. The issues come from
the Blogger Gadget API framework and so I decided to port that gadget
and make a Widget version of the same.This version doesn’t depend on the
Blogger Gadget API and doesn’t have any such issues.This is a pure
JavaScript Widget which doesn’t depend on any APIs or frameworks.
Why the other Gadget fails at times?
The other gadget is made using the Gadget API. The API renders the
gadget as an iFrame with all the parameters appended to the iFrame URL.
When the iFrame url becomes too big, browsers have issues rendering the
gadget. This primary reason behind this is that the API appends so many
style parameters to the iFrame URL thereby making it pretty lengthy.The
current page url is also a parameter.That is why some people complain
that it is working on the home page, whereas it doesn’t work on some of
the post pages. The reason is that your home page url is shorter in
length than your post page url. So it is almost impossible to make the
gadget error free.
So What now?
This new Widget doesn’t rely on the Gadget API, and is not loaded as
an iFrame. This is a plain JavaScript widget, and will work across all
browsers.
What’s special about this new Widget?
If you are good at CSS, you can make the widget exactly as you want.
There is no limit in customizing this Widget. This doesn’t mean that it
is useful only to those who are familiar with CSS. The Widget by default
will inherit your Blog’s Styling. So it should look pretty neat with
the default Styling
Options in the Widget Installer
- Blog URL: This should be the URL of a blogger Blog. If you are
installing the Widget on the same blog then you can leave this field
blank . This field is useful for those who have multiple blogs..
- Number of Posts – The number of posts displayed in the Widget
- Maximum title Length – This option can be used to chop off really
long Post Titles. If a post title is longer than this length, the widget
will chop off the rest of the title
- Show Thumbnail – It’s pretty much obvious from the name
- Show Default Thumbnail – If this option is selected, and your post
doesn’t have an image, then a default image will be displayed.
- Thumbnail Dimension – The gadget can generate square thumbnails of
any size. Use this option to set the dimension of the thumbnail.
- Float Thumbnail to – This option can be used to align the image thumbnail to the left or to the right
- Thumbnail Margin – You can set a 5px margin to the image, so that
the thumbnail stays apart from the post summary. You can override the
margin by selecting No.(You can then manually style it using CSS)
- Show summary
- Summary size – If summary is more than this length, then the widget will chop off the rest
- Show post date
- Show Comment Number
- Show Read more Link
- Read More Text – This is the Text Shown on the Read More Link
- Use Full Feed – By default the Widget will use the Blogger Summary
feed which is smaller in size. If you select the Full Feed option, it
will use the Full Feed which is bigger in size, and hence the Widget
would get slower. The advantage is that, you would get thumbnails of
YouTube videos that you have posted.
- Sorting – Helps you in displaying the recently published posts or recently updated posts.
Now that you are clear with the options, use the below button to add the Widget to your Blog.
Advanced Options:
1.
Default Thumbnail
If the Widget is unable to find an image in the Post and if Options 4
and 5 are checked, then the Gadget will use the following image by
default
If you want to change this default thumbnail, then you will have to
first upload the Thumbnail somewhere. The best place to upload is
blogger. So create a new post(or edit an existing one) and add the image
to the post. Now Switch to the Edit HTML view of the Post Editor. There
you will find a URL which contains “/s1600/” in it. Copy that URL.
Change /s1600/ to /s72-c/. So finally you will get some URL like
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQNuJd_EuwxT471q_Z8FHdiZC7ADP_Z6oJFa2tKtxSEZ0k-mr9ew1zsS3JuZc-f6W4Qo8I9hENgvJ2BNc3Bwjyh0HA6bHdvJiIqj8MGMubd_xNW-tPU1yn6mJjynjrvE7VWGrXgDTkhM/s72-c/default.png
This is your default Thumbnail’s URL. Now it’s time to tell the
script to make use of this Image. For that Edit the HTML/JavaScript
Widget(Recent Posts) and add the following variable:
var defaultImage=”THUMBNAIL_URL_WHICH_HAS_/s72-c/_IN_IT”;
(Off course you will have to edit the above line)
If you are not sure where to add the variable, then add it just before
var numberOfPosts
Save the Gadget and you are done.
2.
CSS Styling:
If you are using CSS Styling, make sure that the Thumbnail Margin is
set to None. You can also set the Thumbnail Float to None. This will
prevent the Widget JavaScript from adding any Styles to the Post List.
You can add your CSS at
Template Designer >
Advanced >
Add CSS
Some Sample CSS snippets are there in the comments.
3.
Tracking the Widget Usage
I have appended a
utm_src parameter to the recent
post URLs.This will help you in tracking the widget usage from your
Google Analytics account(Traffic Sources > Campaigns).
4.
Remove the Powered By Link
If you can’t stand the powered by Link at the bottom of the widget, then you can hide it. To do that Add this CSS snippet
.bp_footer{display:none;}
If you don’t know how to add CSS read the CSS Styling (2) part in these Advanced Options.
Hmmm at the moment, I’m a little lazy to create a Demo Blog. You can expect that sometime soon.
If you have any doubts or questions or suggestions, feel free to
comment here and I will try my best to reply to each of your comments.
I know that many bloggers are having issues in using the old Gadget. So kindly help others by sharing this new post
