Software 24 Hour .com

All Latest Software News Download And Working Tips Here All Free Internet Solution Here bloger tips

.

.

Tuesday 15 September 2015

Recent Posts with Thumbnails Widget for Blogger

Unknown 21:12 No comments :
Recent Posts with Thumbnails is an interesting hack that allows you to display your latest posts in various styles. besides making more cool the display, these widgets can also attract the eyes of visitors. If they are not interested in the post title may be the image was displayed can get them interested. This post explains how to add Recent Posts widget in Blogger with image thumbnails.this Gadget will help you to display the most Recent Posts on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles. So just start the tutorial to create a "Recent Posts With Thumbnails".


Read More :
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery
2. Animated Recent posts for Blogger with Thumbnails - Simple Spy




I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.


If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.


<div id="24work">
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";


showRandomImg = true;

tablewidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 80;
imgheight = 80;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "http://24work.blogspot.com/";

</script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>
</div>





Explanation:



(Edit the values to fit your blog)



tablewidth - Width of the widget

cellspacing - Space between cells (default one is good)

borderColor - Border color (add the background color of your template to perfectly blend it in the template)

thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)

fntsize - Font size of the title

acolor - Color of the titleaBold - you want bold titles? (true or false)

numposts - How many posts you want to show?

home_page : http://24work.blogspot.com/ (change this to your blog url)



And now click Save




this widget was made by [ http://www.instantfundas.com ]




















you might like the Recent Posts with Thumbnails Widget 2



This post explains how to add Recent Posts widget in Blogger with image thumbnails:

well they are many hacks up there on the net for RECENT POSTS BLOGGER !

and actually i have tried many of them ! and while i was surfing the net than i found this amazing hack !

finally i have got what i want ! this widget was made by the legend “bloggertricks” we thanks him for this amazing widget ,very simple recent posts …bravo for the great job !



So, let's see how to install this cool widget 2 in your blog..

1. Sign into Blogger dashboard
2. Go to Design » Add a gadget » html/javascript

3. Just copy and paste this code..



<div id="24work">
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">

imgr = new Array();


imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JPQeb2enoQyXUI_GatRF44rpv7maaOGmyucAvScaFS0w6-yOZoyuum_BxEN3azsKTxTGaFmnZLvAn50R-IEsZ_sRv020q78Q-CLEsnkpTXAYD4VFapnJpNyefhuOiL1IaG5-iU9V2-8/s400/noimage.png";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 80;

thumbheight = 80;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://24work.blogspot.com/";

</script>

<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-2.js" type="text/javascript"></script>
</div>





There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.

4. In the code, look for the line…

home_page = "http://24works.blogspot.com/";
and replace the blog address with your own blog address

5. How to change the number of posts
By default, this widget is set to display a maximum of 5 recent posts. To change this number,
numposts = 5;
edit line in the code and replace the number 5 with the number of posts desired:

6. How to change thumbwidth & thumbheight
thumbwidth = 80;

thumbheight = 80;
Width and Height of the thumbnail (default are good)

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )