• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Posted by Mohsin On 4/01/2013 03:23:00 PM 12 comments

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.

recent posts, blogger widgets, blogger gadgets
Screenshot

To add this cool gadget/widget for the latest categories, just follow the next steps:

Steps

Step 1. From your Blogger Dashboard, go to Template/Edit HTML


Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code:

]]></b:skin>

... just above it, paste this one:
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }
Step 3. Now search for this tag (CTRL + F)
</head>
...and add the following script above it:
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own

Update! For a better image resolution add this script above the </body> tag:
<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);             
</script>
... save the template.

So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:

Step 4. Go to Layout - click on Add a Gadget


Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.
Also within the last code, there are parts that we can customize, just change true with false or vice versa:
var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)
Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.

That's it :) Enjoy!

12 comments:

Please note that this is a 1 track recorder so any previous recording is overwritten. But what if you could
get better grades with less study time. The internet is the best and cheapest
way to help you improve your photographic
skills.

my webpage :: online photography school

I read this post completely on the topic of the resemblance of newest and earlier technologies, it's amazing article.



Visit my site appliance repair las vegas

The Nokia 5228 is such a good phone that has the price of a midrange phone and features of a high end phone.
Whitehill, Karen Jacobs, Iwaski and Michael Khandros.
Of course, there are plenty of professionals who never
attended a single class, so it's up to you to decide what works
best for your career.

Feel free to visit my site - photography courses bristol

It's in reality a nice and useful piece of info.
I'm happy that you just shared this useful
information with us. Please keep us up to date
like this. Thank you for sharing.

Have a look at my web page - people didnt

Pick just one museum such as the Rodin museum or L.
You can opt for the charms bar for volume control on-screen. Nikon Digital
camera price in India is easy matches to the cost and quality sensitivity of the crowd and relatively quite affordable.


Also visit my site :: dslr photography for beginners pdf

Great blog here! Also your website loads up very fast!
What host are you using? Can I get your affiliate link to your host?
I wish my site loaded up as fast as yours lol

Feel free to visit my site :: does the tube viperx really work

I am really happy to glance at this web site posts which includes plenty
of useful information, thanks for providing these information.

Take a look at my weblog :: cost to own a private jet

View other Seattle Free Stuff articles or visit Cindy's blog at for frugal tips,
free stuff and advice on saving money. You can opt for
the charms bar for volume control on-screen. Nikon Digital camera
price in India is easy matches to the cost and quality sensitivity of the crowd and relatively quite
affordable.

Feel free to visit my blog; dslr photography for beginners pdf

Pick just one museum such as the Rodin museum or
L. Online courses also provide baby boomers the chance
to learn something new. "Next class we will begin learning about Impressionism.

Also visit my homepage: dslr photography tips

Hey! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community
in the same niche. Your blog provided us valuable information to work on. You have done a wonderful job!



Look at my web site :: free mortgage leads

I have taken quite a few of these workshops, and have been quite pleased with
all of them. Take photos from the top of a hill, or off
the side of a yacht. The best dance school in Boulder
can provide a comprehensive lesson on basic dance
steps and movements.

Also visit my homepage digital slr photography
beginners (http://www.youtube.com)

Hello There. I found your blog the use of msn. This is a very well written article.

I'll be sure to bookmark it and return to read extra of your helpful information. Thanks for the post.
I'll definitely comeback.

Feel free to visit my website - grill meat temperature

Post a Comment

All types of Comments are welcome