Multi Labels Recent Posts Widget With Thumbnail And Snippet For Blogger

ATTENTION: WE HAVE DEPRECATED THIS SOURCE CODE AND MY SUGGESTION IS SWITCH WITH OUR PLUGIN. LEARN MORE FROM HERE

The idea for multi labels recent posts widget with thumbnails and snippet is from google news. In our opinion, that site displays a number of good news, but the performance is not too slow. The news is displayed based on the labels. Therefore, we make multi labels recent posts widget with thumbnails and snippets for blogger. This widget is very good to offer many topics for your readers on homepage url.

This widget can display a maximum of six labels and five posts for each label. Actually, we have made a similar widget but no snippet. A number of methods have applied in our thinking and our experiments in order to make multi label recent posts widget with thumbnails and snippets can work quickly.

Finally, we arrive at a final decision of how to implement this widget. That is, you must provide a label feed for every label you wish to view. This method produces a more rapid performance than the other methods. Do not worry, you do not need to be confused in applying it, because we've included an example.

---

How To Install

Consider the following code

<script src="https://for-threelas-site.googlecode.com/svn/trunk/mlrpwt.js" type="text/javascript"></script> <script type="text/javascript"> var firstlabel="Science"; var secondlabel="Blogger and Widget"; var thirdlabel="Blogger Api"; var fourthlabel="Game 2D"; var fifthlabel="c plus plus"; var labelurl = "http://www.threelas.com"; </script> <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default/-/Science?alt=json-in-script&callback=firstlabelposts"></script> <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default/-/Blogger and Widget?alt=json-in-script&callback=secondlabelposts"></script> <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default/-/Blogger Api?alt=json-in-script&callback=thirdlabelposts"></script> <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default/-/Game 2D?alt=json-in-script&callback=fourthlabelposts"></script> <script type="text/javascript" src="http://www.threelas.com/feeds/posts/default/-/c plus plus?alt=json-in-script&callback=fifthlabelposts"></script>  

The above code is displays the label of Science, Blogger and Widget, Blogger Api, Game 2D, c plus plus from threelas.com. You just change http://www.threelas.com with your blog url and the labels on your blog. If you want to display six labels, then add the code

var sixthlabel="YOUR LABEL";

Minimal posts that should be possessed by every label is 5 pieces of posting. You can put this code in HTML/JavaScript widget on your Page Elements (Just click Design -> Page Elements).

---

How To Styling

We have designed a number of HTML code on multi label recent posts widget with thumbnail and snippet. Please see the following HTML code below, this code is for label url

<div id=”idh2mlrpwt”>

     <h2 class=”classh2mlrpwt”>

            <a href=”Label URL”>Label</a>

     </h2>

</div>

While, the HTML code for posts content is

<div id=”idmlrpwt”>

     <p class=”classmlrpwt”>

          <span style="float:left;padding-right:10px;padding-bottom:10px;"><img alt="post title"   src="img url"/></span>

          <h1><a href=”Post Url”>Post Title</a></h1>

     </p>

</div>

So, for those of you who are experts in css, then you have many opportunities to provide a different style.  Here is the css code that we have applied

<style> #idh2mlrpwt h1,h2{font:bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;text-transform:uppercase;color:#ff0000;margin-right:.5em 0;margin-bottom:.5em 0} #idh2mlrpwt h2{font:bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;text-transform:uppercase;color:#ff0000;margin-right:.5em 0;margin-bottom:.5em 0;padding:3px;background:LightBlue;}#idmlrpwt p:hover{border-top:3px solid DarkGrey;border-bottom:3px solid DarkGrey;} </style>  

This widget still we have developed a better, easier to use by anyone. Your support so we expect to continue to develop your blogger.

Update March 22, 2012
Now, this widget can work with original css from blogger.