Recent Posts with Thumbnails is an interesting hack that allows you to display your latest posts in various styles. Of course, Blogger has the Recent Posts with Thumbnails gadget, but this hack gives you more flexibility and options to choose from. Another default Recent Posts widget pulls content from your RSS feed and shows only the post titles. But thanks to Marianne, who was responsible for this Blogger hack, your site can look great.
Before you make any changes, take a backup of your template from Design --> Edit Html.
Then copy paste the below code in Design --> Page Elements section of your blog.
<script language="JavaScript">To run you through the script, you can add your own image url here 'http://YOURIMAGEURL.jpg' for articles without an image. You can add imgr[1] [2] etc., as per your requirement. You can adjust the image size, background colour, post title colour, summary colour, font size, number of posts to be showed and so on in the code. Add your blog url at the place where it is mentioned in the code and at the end of the code there is a javascript file -'http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js' (marked in bold) which can be hosted on your server or any other site.
imgr = new Array();
imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";
showRandomImg = true;
tablewidth = 278;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 100;
imgheight = 80;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 75;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "YOUR-BLOG-URL";
</script>
<script src="http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js" type="text/javascript"></script>
As mentioned earlier this Recent Posts gives you lot of variations in terms of display, for instance you can have horizontal or vertical display, with or without comments, thumbnails with description etc. I have mentioned below the different javascript files available and based on your choice upload it your server or file hosting sites and add the js link in the above code and save the changes.- Recent posts in horizontal position with only thumbnails
- Recent posts in vertical position with only thumbnails
- Recent posts in horizontal position with thumbnails, title, description and comments
- Recent posts in vertical position showing thumbnails, title, description and comments
- Recent posts in horizontal position showing thumbnails, title, description and without comments
- Recent posts in vertical position showing thumbnails, title, description and without comments
- Recent posts in horizontal position showing thumbnails with title, description from any particular label
- Recent posts in vertical position showing thumbnails with title, description from any particular label
- Recent posts in horizontal position showing thumbnails with title, description in between thumbnails instead of below thumbnail
In case of recent posts with thumbnails from any particular label/tags/categories, insert this line in the above code after -
'home_page = "YOUR-BLOG-URL";'
label = "tagname";
Recent Posts with thumbnails hack certainly enhances the look of your blog!
Share this Blogger Template:
It is not working for me ....
Does it not need JQuery?
I'm afraid to say that the hack doesn't work on my blog - http://comicbookandmoviereviews.bpotspot.com
Why is that?
@ The Reveiwer
Im afraid I can't help you if you still don't have the hack installed!!! Let me know when you install it and then I can check, give me some time though, have a christmas backlog that im responding to :)
@ admin
its working on this blog! using the exact same script in the post!
For Recent posts in horizontal position showing thumbnails with title, description from any particular label the title and description is not shwing at the bottom nor on the side if it's vertical.
@ photomylens
ill need to take a look at the code in your blog, if you could leave me your url I could take a look....
hello guy..
how can i looking toturial to create related post like your site..
@ nice man
this is the tutorial for the same related posts that we use...
i need to display more than 15 posts in horizontal but my template is braeking :(
Is there a way to pull from a single category/tag/label rather than just recent posts? Maybe with an RSS feed?
I'm very handy with html/css/js, but I have a client who wants to pull specific "featured" posts--he doesn't know any code, and I'd love to set it up so he can just tag posts to include them in a horizontal list like this.
Like http://www.geekosystem.com/ or http://thehairpin.com ... it would be so easy in WP but client loves blogger.
positdesign - The code is given above for recent Posts from a particular label/category, its in the list of download links, third from down...am sure that will be help!
Mithra Children's Welfare Association - Which template are you using?