28 Aug 2011
Scrolling/Ticker Recent Post Gadget For Blogger
This recent posts widget is similar to the standard recent posts with thumbnails but with one twist. It combines jQuery vticker plugin to produce a simple and sleek sliding effect that smoothly scrolls through the posts.
See Demo
Steps to Add it to Blogger:
1.Login to the Blogger account
2. Now Go to Design > Page Elements (For New Interface go to Layout)
3.Now in the sidebar Click on "Add a Gadget" and then choose the HTML/JavaScript gadget
4.Now copy the following code and paste it into the HTML/JavaScript gadget : (How to copy code easily)
<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
<script style='text/javascript' src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://www.YourBlogURL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>Important : If you have already included jQuery library in your Blog then remove the Line 2 from Above code
Important : If you look in the code you will find http://www.YourBlogURL.blogspot.com/ replace this with your blogs URL.
Optional Changes :
There are lot of changes that can be made to the code , the main edit you may want to make is the number of posts scrolled and displayed. To change the number of posts that are scrolled through change the following present at Line 6:
numposts =7;
You can change from 7 to the number of posts you wish to have scrolled.
Now to change the number of post that are displayed at any given time ,change the following attribute present at Line 17:
showItems:3
You can change from 3 to the number of posts you wish to have displayed at any given time.
To change the time interval and speed of the scroll Change speed:500 & pause:3000 present at Line 15-16 of the code. pause defines the Interval between the Scroll and speed defines at what pace is to the scroll done (all values are in microseconds).
Other changes like whether to display comments, description, Post date,etc can be done by changing the parameter from false to true (Present from Line 6 to 13 in code)
A Very Important Thing To Note : It might happen that the scroll effect might not work, the main reason behind this can be conflict between some jQuery plugin already present in your Blog, The most common solution to this is to add the following code after this gadget:
<script type='text/javascript'>
jQuery.noConflict();
</script>
If the scroll effect still doesn't work then you might have to remove any other jQuery plugin completely so as to make this gadget work.
5.Now Click on Save.
See Demo
Til next time,
Prayag Verma
at 11:11
