Auto Scroll

Normal Recent Post on your side bar is kinda boring, don't you think?
Why don't we change it to something cooler, like an auto scroll up recent post?


Let's get this installed on your blog, shall we?


1. Log in to your Blogger account


2. Go to Layout


3. Select Add a Gadget


4. Select HTML / Javascript


5. Copy and Paste the codes 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 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 = 20;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
$(document).ready(function () {$('#sai').vTicker({
speed: 550,
pause: 5500,
showItems: 4,
animation: 'fade',
mousePause: true,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://YOUR BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script>
</div>

---------------------------------------------------------------------------------------


6. Now the fun part - tweaking the code! yay!


    var numposts = 20;     
    These shows how many recent post you want to display. 
    Say you want to display only 5  recent post, change the number to    = 5;

7. var showpostthumbnails = true;
   If you want to show the post thumbnails, leave it as it is.
   If you prefer just words without thumbnails, change it to:       = false;

8.  var displaymore = true;
    These shows the  More - link after the post date. 
    If you prefer not to have it, change it to:                      = false;

9. var showpostdate = true;
    These shows the post date. 
    If you prefer not to have it, change it to:                 = false;

10. var showpostsummary = true;
     Leave it if you want to show the post summary. If not, change it to:       = false;  

11. speed: 550,
     This control the speed of your auto scroll. If you want it to go faster, make the
     number smaller, say 500? If you prefer it to be slower, increase the number.

12. pause: 5500,

     This control how long your auto scroll paused. If you want it to go faster, make the
     number smaller, say 5000? If you prefer it to be slower, increase the number. 

 13. showItems: 4,
     I set mine to show 4 recent post at one time. 
    You can change it to 3 or more if you like

14. mousePause: true,
     I prefer to have the auto scroll to pause when I hover the mouse over it.
     It makes it easier your my reader to actually read the recent post list.

15. direction: 'up'
     Control the direction of the auto scroll. Change it to 'down' if you prefer it to
     scroll downwards instead.  Haven't tried the 'left' or 'right' option though.
     Let me know how that goes if you did try, shall we?

 16. <script src='http://YOUR BLOG.blogspot.com/feeds/posts/default?
     Change this to Your blog name, or you'll be seeing My blog recent post instead :-)




17. Click Save and tadaa.....