Now that we understand the JSON-feed mechanism, it is quite easy to convert all our feeds to customizable widgets, that you can copy to your own sidebar. You can use the widget to display your own recent posts on your own blog, but you can in fact display the post-feeds of any Blogger blog you like.
Installation is easy.
Install Widget
Go to the Widgets & Downloads Page and click the Install Recent Posts button.
This will bring up a pop-up window in which you can customize the widget settings, before adding it to your blog.
Replace 'beautifulbeta' with the name of your own blog.
Set the number of recent posts you want to show (default = 5).
If you want the post date to be displayed, check the box (default = checked).
If you want a post summary to be displayed, check the other box (default = checked), and enter the number of characters of the postsummary that you want to display (default = 100).
If you want the standard styling, select the 'standard' radio-button. If you want to define your own CSS-definitions, select 'custom css'. After installing the widget you will have to add CSS-definitions to your blog's template for the classes .bbrecpost, .bbrecpostsum and .bbwidgetfooter.
Now click the 'Customize' button, or click 'Reset' to return to the default values. If you are satisfied with the settings, click 'Add Widget To My Blog'. This will bring up the Blogger-screen that lets you select your Blog to install the widget to. Click the blue 'Add' button to add the widget to your blog.
Update 1: the widget did not work for Short feeds. That is fixed now, it will work for both Full and Short feeds.
Update 2: it is not longer needed to add the javascript library to your template. The widget now realy is plug and play.
Update 3: you can install the widget using Beautiful Beta's Widget Installer. Click-n-Go, no hacking or editing needed!
If your Blog is published to your own FTP-site, click here for the FTP-version of this widget.
Posts
Look Up Words as You Compose
3 weeks ago
This is what people say:
Hans,
Thanks it works like a charm.
I can't find a post by you regarding changing fonts and colors. With beta its real easy to use bloggers version by not enough options as far as I'm concerned. I would like to use a font that is more of a western appeal. I just can't figure out how to implement it correctly.
Oh sorry.. not enough info in last comment. I want to use the font in my header.
Bulls eye! I was thinking about this as well. It is nice to have the summary along with recent posts. I will add a link to this post from my blog.
@Ramani: the possibilities are endless. You could let your readers add a labelfeed to their own blogs with one click.
One improvement might be: not editing the widget to customize it,but a pop-up-form to customize the parameters, and then adding it to the blog.
"recent comments" is ok, but "recent posts" not work. my blog . thanks for help :)
emrex. if you just change where it says:
"var numcomments"
to
"var numposts"
it will work.
@emrex, sam: thanks for bringing this bug to my attention. It's ixed now.
thanks, please check this post..
When I set the summary off then the gap between the titles becomes too big, any way to fix that?
@TrueLife: thanks, I fixed it.
Sorry, need to fall back a couple of steps. I don´t seem to get my 'recent posts' working. I have inserted the code just above the head-tag. nothing happens. I´m using the template 'TicTac', but that shouldn´t be a problem. Where do I find the 'Add to Blog'-button? I think that´s the problem. I am lost!
I would prefer to have my template in HTML, not XML. Is that possible?
So, the question is simply:
how do I insert 'Previous Posts' in my Sidebar? The described methods does not work for me!
Please help me,
Ludde
I have installed this second widget but I have a problem. A post from June is appearing in the middle of the last 5 from Oct + Nov. Please advise what I have done wrong!!!!
familieolsen.blogspot.com
Many thanks
@Ludvig: check if you are using the new blogger beta, with a layout (not a template). This widgets will only work with blogger beta and with the new wigetized layouts. Installation needs 2 steps. Step 1 is adding the javascript library to your template. That is a one time thing, with this installed you can add all my hacks and widgets. Step 2 is going to my downloads-page, and click the button to install the widget to your blog. That will bring up a Blogger popup window, that lets you add the widget to your blog by pressing a blue button at the bottom of the popup. Before pressing this button, click "Edit content" to change the feed-url to your own feed.
@nzmum: I think that somewhere in october you edited your June post. That is why it shows up in the feed. The logic behind it is, that your readers want to be informed of new posts AND of updates of old posts. The order of the feed-entries is by update-datetime, the date displayed in the widget is the published-datetime.
Hans:
First I want to thank you for the excellent customizations and hacks you are developing here. I have incorporated several of them on my blog already.
I am not succeeding however in adding the "Recent Posts" widget to my blog. I have added your javascript code to my tepmlate as instructed, and altered the code in the widget to the name of my blog.
But the Recent Posts widget shows no posts.
Please help?
Thanks in advance.
Thanks Hans for your explanation. Is there anyway I can change the widget to display only the last 5 chronological posts?
hi
i did everything as instructed, but this hack does not show up. i named it "recent recipes"( recipe blog)..not displaying anything...http://home-cooked.blogspot.com
hi
i did everything as instructed in http://home-cooked.blogspot.com, but this hack does not show up. i named it "recent recipes"( recipe blog)..not displaying anything...
@Alexander: I did several checks, and they all leave me puzzled. You added the js-library correctly to you template, I can see the other hack at work. Your feed is okay, I have a simple tool to load a JSON-feed using the callback-mechanism, and that works fine, so your feed in itself is okay. The coding of your widget is okay. I added a widget with your post feed to one of my testblogs by the book, and I have the same outcome as you: it doesn't work. I have posted this problem with a few of the hackers around, I hope one of them has an idea about this problem. I am sorry I could not be of help this time.
@NZmum: I am afraid that is not possible with this widget.
@gentletouchee: see my answer to Alexander on this same issue.
Hans,
One of Alexander's posts doesn't have a content. It is dangerous to assume that the content is always there. One of he line you have in your beau..js looks like this:
var postcontent = entry.content.$t;
If the content is not there, then $t doesn't work, thus messing up the whole thing. Better wraps it with sth like this:
if (entry.content.$t) {
... blah blah blah
}
Hope this helps,
var postcontent = entry.content.$t;
Hans:
Thanks for trying. I see that Hoctro has suggested a possible fix but I'm not sure that I understand how to implement what he is suggesting(?)
Actually, I also tried Hoctro's "recent posts" widget, and that worked in my blog. However, it displays more posts than I want to display, and also some of them are not in the correct order, chronologically.
So I guess I'll keep trying...
Thanks again,
Alex
@Alexander: please check your site feed settings. Set Post Feed to Full, not Summary. I think the widget will work if you change this setting.
Hans, Thank you so much for all of your insight and work. I have used several of your hacks and how to's to constantly tweak my blog, Which is looking awesome. I pass on the word to everyone I know blogging! Thanks!
Hans,
I put the summary to false and now there seems to be big gaps between the recent post titles. Is there a way to take out any line breaks? Thanks a ton!ryanmarle.blogspot.com
@ryan: the widget is update now, you can add even your own css if you want!
I've installed your widget and it is really what i was looking for.
i have a small problem however because the list doesnt show nice right now. i would like to shrink it to get rid of all that blank space between posts. http://sierraeye.blogspot.com
widget is placed on the left sidebar underneath the links
I´ve installed your widget and it just works like a charm. Just one thing: is there a way to display more than 25 posts? I have 40+ posts.
Thanks in advance.
How to use this hack to display "Recent Posts by Label (Category)"
Just change the code in the widget as follows:
< br/><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentposts2.js"></script><script style="text/javascript">
var numposts = 25;
var showpostdate = true;
var showpostsummary = false;
var numchars = 50;
var standardstyling = false;</script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default/-/LABEL?alt=json-in-script&callback=showrecentposts"></script>
Just change 'yourblogname' and 'LABEL' to whatever you want.
Simplement Genial!
It works really nicely, especially that my blog is attracting some increasingly "contentious" debates. At least now, the comment section can be more "visible".
I will try and customize it further.
Hans, is it possible to, do now or in the future, use any RSS Feed and not just a Blogspot feed?
@Paramount Chief: the newest release of the widget has the option to customize your own CSS-styling. That way you can make it look just like you want.
@agustin: yes, I think it is possible to increase the number of posts, but it will require some extra javascript code being built in. At this point in time I am not in the opportunity to develop this, it will have to wait a bit.
@Ted and Jeha: thanks!
@DarkUFO: that would be nice, I agree! But javascript can not retrieve feeds from other servers. You would need scripting (PHP) to get the feed before handing it to javascript. At least, that is what I understand, I have no knowledge of PHP.
Thanks for the info Hans....
Here's another one for you.
Does the JSON feed allow you to see how many comments have been made per post? If so could that be incorporated into your code as an option e.g Show No. of Comments (y/n)
Thanks again for a great site that has helped me build my blogger into something that I am proud of.
@DarkUFO: that is not part of the JSON-feed. Sorry.
Thanks anyway Hans :)
HI: I just tried various configurations of the widget.
* The "no-summary" version had too much space between entries. Can this be fixed?
* There is too much space between the title and the first post listed. Can this be fixed?
* There is a link that is not wrapping and is out of the sidebar. Without changing the number of characters in the summary, can this be fixed? It looks awful.
Thank you for a great widget!
Same problems here what meeyauw said!..
Thanks a lot Hans, it's really works and very useful. I use it for our company's blog.
Hi Hans,
I'm wanting to add recent posts to my front Blogger page with posts sourced from about 4 other blogspot sites (all my own). Is there any way to modify this widget to specify where the "recent posts" come from?
Also, I find the gap between the heading "recent posts" and the first post link to be too large - is there any way to reduce this?
Am assuming this widget will be fine to install above my blog posts on the main page, rather than in the sidebar...
Thanks for a fantastic site. Hope you can help.
Cheers.
Love the widget, but am having the same "extra space" issue that several others have raised... I want post titles only (as I currently have w/ a pre-beta template), and when I deselect date and summary I get too much white space between post titles... (You can see what I mean over in my sandbox at http://boomfassfro.blogspot.com)
Thanks for all your work, just the same.
Hans: I desperately need a recent comments tool installed in my sidebar.
Now, no html tools are working on my blog, so I'd really prefer something through feeds, which again I tried.
I used http://sandyi.blogspot.com/feeds/comments/full
It worked in the sense that it displated five names, who commented ast with dates. But there were no comments, neither link.
Could you please help me out here...I don't want to use html, as I've had a bad experience wiht my whole blog going haywire.
Would like it simple through 'feeds'
my blog url is http://www.sandyi.blogspot.com
First of all, great widget.
I'm working on the design of my Blog and in the next days I will make a huge change. One thing that I've change is the RSS Feed widget of Blogger with the yours because the one with Blogger is not full configurable in the quantity of feeds to show.
I have the same problem with the extra space and gap with the widget title and the first post, but I solved this with CSS code that I post here:
.bbrecpost {
margin: 0;
position: relative;
top:-13px;
padding-left: 0;
}
The widget is in my Beta-Testing site, so you couldn't see working but I assure you that is working.
Thanks
Diego
Blog: Diego Cabai Blog
Hans, great widget, Thank you. I use it on all my blogs, and have included the style code in my templates.
Question: do I need / would it be possible to get the source code from you and incorporate in my templates in case you have server problems at your end?
Wow..
I am want to say thank you for being one of those bloggers who loves to help other people.
Really love your recent comment widget which i added in my blog.
I am going to make a thank you post for you...:)
Hi, I like your widget, but at least for me, it will be more useful if it can show random post and not an ordered list of recent posts.
Is possible to you adapt your code to randomize the posts ?
Or at least, to permit I choose an interval of post, like to show 10 posts from day x to day y (from 05/11/2007 to 25/10/2007) .
Thanks and sorry for my bad english.
Thanks a lot for the widget! It's very easy to do it.
Also thank Diego, it works great!
Thanks Hans for this excellent widget.
For those who have the problem with too much white space between the entries in your recent post widget, I have found the following solution. Please note that I know doodly about CSS but just found a bit of code from elsewhere on my blog that looked like it might work, and it did. So use this at your own risk and if anyone can clean up the code or explain how it works, that would be great.
Basically, I took Diego's code, which for whatever reason doesn't work on my blog, and added a bit to it.
To get the gap between the lines to display properly, you have to select custom css when using the beautiful beta widget generator, or set standardstyling = false; in theRecent Post widget box created by Beautiful Beta and accessed through the Page Elements page. . Then you must go to the "Template"--"Edit HTML" page and add the following code just before the /B:skin tag. Be sure to back up your original template before you do this.
.bbrecpost {
margin: 0;
margin: .75em 0 .25em;
position: relative;
top:-13px;
padding-left: 0;
}
Please refer to "C. To add CSS or JavaScript code:" on Hoctoro's page here to see exactly how this is done:
http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html
or
http://tinyurl.com/268ylv
Note that the .75 and the .25 seem to control the minimum and maximum distance between entries, so you can try other numbers in place of these and you will get different gaps between the lines. These are just the numbers that gave me the same gaps between entries as my original template. I have no clue why this works, it just does.You can see my blog at: http://paynehertz.blogspot.com/ to see what this looks like.
Hope this helps.
Hans, it's not working any more -- nothing is showing up. I haven't changed anything in my templates. Just aint there. I always thought there would be a chance this would happen one day, which is why in my previous comment I asked for the raw code in case the server fell down at your end. HELP
Just wanna say thank you for the widget!!
Hi
I am new to using your widgets. I can't seem to get this one to work for me. Blog is at http://www.pamperedup.com
When I added the widget I used blogger domain but I have my redirected. Could that be the problem?
Thanks
Tink
This is just what I was looking for...but I can't make it work...I mean, with Firefox it works great, but when I open my blog with Internet Explorer the complete sidebar dissapears---I dunno what I'm doing wrong...any ideas?
The hack worked like a charm on my Beta Blogger blog. Thanks.
A question: When I tried to use the hack on a restricted access blog requiring authorization and password, it did not work. Is there a workaround?
Thank you kindly :-) I'll add you to my blog roll.
Thanks for the hack. It works like a charm. But I found the spaces between the blog titles are too big. Is there any way to fix it to match with my blog design? Thanks for any help in advance.
It was working like a dream for months but this last few days it is just blank! Any ideas what happened?
My blog is at http://ieatishootipost.sg
Nice Blog, mAn thnkz
hopefuly askin dat me want to have a rEally good online comment box script for my blog in my NAME
so jUst tEll me if any one knowz about ...
hi, thanks for the great widget! i kinda modified it a little to include the first picture in a post (if any). i hope you don't mind though.
Recent Posts with Pictures
hey...thanks for the widget...
really cool..
http://rajeshhackingarticles.blogspot.com
Hellow Hans
Do you Know That we Can Create Recent Post and Widget Using feed The widget is Fully Featured ,Try It Now?
Thanks
In order to make money online in the best possible way, you need to figure out effective business strategies and we can help you with that. We, at Infinity Informations, are well known all over for providing efficient business solutions to our clients all over the world and as soon as you utilize our ecommerce solutions for the purpose of facilitating your online business, you would notice sudden and tremendous growth in your ecommerce venture. So, contact http://www.infyecommercesolution.com immediately and facilitate your online business.
Dear Hans,
Hi! I installed your widget of "recent posts", but it seems not to work, even though with your 3 updated announcements. Is it possible for you to let me know the reason? My blog is: http://lesspainchinese.blogspot.com/.
Thanks a lot in advance!
http://bloggertinker.blogspot.com/2009/03/how-to-put-recent-postsrecent-articles.html
This is the simplest and easiest way to add a Recent Posts/Recent Articles widget in your blog. Unlike other blogs, the tutorial here uses the standard Blogger Feed widget to make the Recent Posts/Recent Articles widget. And I am 100% sure your Recent Posts/Recent Articles widget will work.
Thanks for ur collections
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.
Look who's linking here!
0 Backlinks point here