Widget Posting Terbaru/Recent Post Per Label (FIXED)

It was started from a simple idea about how to make my blog looks simple but contain many information. About how to make almost everything in the home page, just like a news website. We can see slider, headline news, what is new, and sort it by a specific topic. I was browsing, searching all around the google by many key words, then finally I got a html codes about how to make a recent post sorted in a specific label. It was so plain. No background, no any border, or any else. So I decorate it by using some CSS codes to get what I want, and everything is just like this.

I finally got what I want after so many hard work for someone who does not know many codes. I think there will be so many people just like me out there, find for the same design, just like I want to. So, I think it would be better if I share it here, for you.

In this widget, I was customized the widget's title font and background for the whole blog. It was automatically there. You will not get it by the code I share here. Sorry dude. It need another effort.

To apply this widget to your blog, you just need to follow these simple steps. Here it is.

1. Login to Blogger -> go to Layout.
2. Click Add a Gadget
3. Choose HTML/JavaScript
4. Type the title of the widget and put these code:
   
   <style type='text/css'> img.recent_thumb{ padding:0; width:70px; height:70px; border:0; float:left; margin:0px 10px 10px 10px; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border:2px solid #373738; background-color:#ffffff; box-shadow:0px 2px 8px #000000; } .recent_posts_with_thumbs { float: left; width: 100%; min-height: 70px; margin:0; padding:0; font-size:12px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border:3px solid #373738; background-color:#ffffff; box-shadow:0px 2px 8px #000000; } ul.recent_posts_with_thumbs li { padding-bottom:5px; padding-top:5px; min-height:65px; } .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} </style> <script style='text/javascript' src='http://yourjavascript.com/63141640323/widget-recent-posting-blogdeby.com.js'></script> <script style='text/javascript'> var numposts = POST NUMBER; var showpostthumbnails = true; var displaymore = true; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = true; var numchars = 100;</script> <script src='http://BLOG_ADDRESS/feeds/posts/summary/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><span style="font-size: 150%; Float:right;-webkit-border-radius:5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border:2px solid #373738; background-color:#ffffff; box-shadow:0px 2px 8px #000000"><a target="_blank"href="http://BLOG_ADDRESS/search/label/LABEL">Show more this topic</a></span>
   
   
   • Change POST NUMBER to the number of posting you want to be shown. For Example is 5.
   • Change BLOG_ADDRESS to your blog address.For Example is WWW.NEWAFFILIANCE.BLOGSPOT.COM.
   • Change LABEL to your label name. For example GAMES, or S60V5%20GAMES. (change space to %20)
5. Click Save

It is easy and simple. You may customize the CSS codes as what you want. With this widget, you will bring all the latest update sort by the label in an interesting way if you can use it well as I did.

Have a nice try dude, and I will appreciate your comment here (^_^)

Nb:
The script was broke at March 26th, 2013. But now it have been fixed,

Related Posts: