Recent Posts Widget With Thumbnails Preview for blogspot blog is another hack made avaialble to use by blogosphere,which has made a blogging look really beautiful and proffesional.With the help of these we make blogging look proffessional.Now something about hack as you would be using recent post widget for sure showing post titles but now this widget will be showing images with or without title from your posts or you defined manually.
I have before posted on
Recent Posts and
recent comments widget also,you can check them too if you want them.
Now let see how to install this hack and thanx to
marianne to make this hack look very simple and show it in many ways to adjust the blogger template.
Now how to install it.
Just not waste time,first
download these file from here which contains scripts to make your widget work.
Goto Blogger Layout > Page Elements > Add A gadget > Html/Javascript
And add the below codes:-
<script language="JavaScript">
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 = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 118;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://YOUR_BLOG_NAME.blogspot.com/";
</script>
<script src="http://YOUR_UPLOADED_SCRIPT_URL/recentposts_thumb.js" type="text/javascript"></script>
You have to change the bold links above in codes to make it work.
Now i will explain all the parameters in the script what it does.
- Lines
imgr [0] = "http://YOURIMAGEURL.jpg";
contains link to the default image, you can replace this link with your photos, you can also add many others by creating additional lines imgr [5 ]=..., imgr [6] = ..... Try to select the image size small to have such severe widget.If you will not use image here the widget will automatically extract first image from your post and show up the thumbnail and if it doesn't contain any image it will not show up any image so you can define your image url in this line.
- The showRandomImg = true; that is enabled does the random image default image if you want existing order, please change true to false.
- 4 lines
tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
in turn is the width of the widget (pixels) between cells, border color of widget and widget's background color.
- 2 lines
imgwidth = 118;
imgheight = 100;
is the width and height of the image thumbnail.
- 4 lines
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
turn is: Font Size of title, title color, turn the bowl bold title (if you want the shortcut to the true false), the icon before the title (if you do not want the icon for the empty value).
- Line
text = "comments";
text of the report you want to comment now (for example: text = "reviews"). If you do not want the number of comments for each post, set text value = "no".
- Line
showPostDate = false;
say that the current date was off. Please replace false with true if you want the date.
- 4 lines
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
in turn is the number of characters like the description for each post (if you want to disable, set the value is 0), Size of the Font described, description and color icon of the previous description.
- Line
numposts = 5;
ask you to report the number of items will appear on the widget, for example above is 5.
- Line
home_page = "http://www.anshuldudeja.com/";
ask you to report address blog currently use.Do not forget it is important to seal against your url with (/) at the end of the url.
Now this was all customization part if you not happy with looks of it and can do it yourself.
Now the thing just important is the script to use in codes as i have made that place red color bold in codes so as to tell where to add the script.
As i have told you at the beggining to download the scripts,if you haven't downloaded,
download it from here.
After downloading you will get zip file,extract it and you will be given nine .js files or 9 scripts.
All nine script does different work.What type of work they will do i am writing below and how to know which script you have to use for which purpose,you just need to read the name of the file,you will come to know for which purpose it is after reading the below functions of nine scripts.
1)Recent posts in horizontal Position showing only Thumbnails.
2)Recent posts in Vertical Position showing only Thumbnails.
3)Recent posts in Vertical Position showing Thumbnails With Tilte And Description With Comments.
4)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description With Comments.
5)Recent posts in Vertical Position showing Thumbnails With Tilte And Description without Comments.
6)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description without comments.
7)Recent posts in Vertical Position showing Thumbnails With Tilte And Description from any Particular Label.
8)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description from any Particular Label.
9)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description in between Thumbnails instead of below thumbnail.
These are the only nine ways you can use this script.Just download the scripts and with the name of file you will come to know about its function and can use that script.
Just upload the script you want to use to your server and replace the url in bold red in above codes with your url and dont forget to change your blog name also which is also on bold back in above codes.If you dont know where to upload this script just read on the
list from here.
As above i have told you about the label script also,i.e script to extract thumbnails from your any particular category you want.If you using widget for any category of yours.Just use the below codes in place of above i provided.
<script language="JavaScript">
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 = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 118;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://YOUR_BLOG_NAME.blogspot.com/";
label = "tagname";
</script>
<script src="http://YOUR_UPLOADED_SCRIPT_URL/recentposts_thumb.js" type="text/javascript"></script>
The difference in both code is just of red code as i have added that is label line,just change the tagname with your category name,then it will work for your category and please don't forget to change the blog url and script url in these codes.You can't use only thumbnails for your category as post tile and description will also be shown.
I hope you will love this widget.Have A nice Day !
