- Customize the codes according to the style of your blog and blend the widget color on your blog theme
- Add as many number of widgets you want. Either Recent posts or posts from a particular category! (That is a particular label)
So read on to know how…
Preliminary works to fix your Blog’s Layout:
Assuming that you are using any default blogger template, or at least that template having default blogger classes, here is what you need to do:
- Go to Blogger Dashboard > Layout > Edit HTML.
- Now Add the following lines of codes on your template before ]]></b:skin> (Just as shown on the image above)
- This hack is to safe guard the layout of the table which we are going to make using the Recent Post JS. Now click on save template and you are done!
This is as simple as explained previously in “Attaching jQuery directly on your blog” post. Just follow the steps below!
- Again go to Blogger Dashboard > Layout > Edit HTML;
- Now just before the closing </head> tag on your template add exactly the following lines of codes:
If you are having trouble copying this, then you may download it from here! (ZIP File: 2.8KB) Copy exactly the same code before the </head> found on the recentpostwiththumbnail.txt file (As shown on the image below)
- Now Hit the Save button and you are done!
Making a Recent Post Widget from your Blogger Layout:
Now the final work…
- Go to Blogger Dashboard > Layout > Page Elements;
- Replace greentechspot.blogspot.com with the URL of your blog! Also change the max-results=10 to any value corresponding to the number of posts you wish to show! Like max-results=5 for 5 posts.
- Save the Widget and see your blog! Quite cool isn’t it?
Here are a few options which you can do!
- boxwidth = "100%"; Change the 100% to a fixed value like "300px"; Make sure that you have wrapped it side a quote and give a proper unit! Else the JS may not work.
- borderColor = "#ffffff"; Change the hex color code to any value in order to blend into your template. For getting color scheme generators have a look here;
- thumbwidth = "48"; & thumbheight = "48"; Change it to any numerical value to make thumbnail of that size in pixel.
- fntsize = "13"; Change the font size of the post heading! (It was not working on the original bloggertricks code, but I have fixed it!)
- acolor = "#000099"; Change the color of the Post Title link.
- aBold = true; True for bold fonts false for normal fonts.
Making a Particular Label posts using this script:
- Now paste the following code inside the gadget:
- Obviously you need to change yourblogname.blogspot.com with the blogspot address of your blog and %LABELNAME% with the label name! Rest modifications are same as stated above.
- Note that if your label name contains a space in between then you need to replace that with a “%20” character. Like the label feed URL is
- Hit Save and you are done
Well that’s all to make a good looking Recent Post in your blogger blog with a Thumbnail. Feel free to modify the code as per your need! And if you are a JS programmer then do what ever you want! Also if you face any problem regarding this feel free to ask through your comments. Also contact me if you wish me to do several tweaks on your blog!