November 21, 2011

Featured Post Widget for Blogger

I have been trying to get a cool widget for my blog and found this helpful code that can boost your blog's design. This is the "featured post widget" wherein you will be able to designate a specific space in your blog for a certain topic.  


Here's how to do it...

First is  you have to choose "Design" among the top tabs that you can see.




Then, click on "ADD GADGET" and choose " HTML/JavaScript"
 Copy the code below:
 

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;    float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}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://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js "></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>

<script src="/feeds/posts/default/-/topic?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Search for this code by pressing ctrl+F :  <script src="/feeds/posts/default/-/topic? and replace the word topic to any label that you have in your blog. This is case sensitive so you might as well need to encode the correct label and capitalization of the letters in your label or tag. 

In my case, I used the label "Event" so my code would  be <script src="/feeds/posts/default/-/Event? with a capital E since the word Event in my labels has the letter E capitalized.

Your widget would look like this:

You can also adjust the font size by searching for this code: font-size: and changing the number after it to make the font larger or smaller according to what you want.


0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...