Add Vertical Scrolling post Ticker With Thumbnail to blogger

This is wordpress converted scrolling with thumb plugins for your blogger add this gadget and make your blog sidebar more interesting and cool effect scroll post .

Now follow below simple step to add this gadget in your blog sidebar --->>>>
* First go to your blogger Dashboard .

* Now click in design tab and edit html.

* Now click small box to expand your blogger template.

* Now find this code </head> and copy below code and paste before </head>

<script src='http://yourjavascript.com/01124010232/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://yourjavascript.com/71000221312/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&quot;.newsticker-jcarousellite&quot;).jCarouselLite({
        vertical: true,
        visible: 3,
        auto:500,
        speed:2000    });
});
</script>

If you wish to change the speed of post  ticker movement, change the speed in the above code with your required value. For an example, in the above code you can see the speed as 2000 (2 seconds) where in you can change the value to adjust. You  can also change the number of news to be visible.

* Again find this code ]]></b:skin> and copy below code and paste before ]]></b:skin>

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }

* Again find this code by ctrl+f key  <div id=’sidebar-wrapper’> now copy below code and paste after  <div id=’sidebar-wrapper’>

<div id='newsticker-demo'>
<div class='newsticker-jcarousellite'>
<ul>
<li>
    <div class='thumbnail'>
        <a href='http://blogger9.com'><img src='http://i39.tinypic.com/n47h8k.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.blogger9.com'>Blogger Hack</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>

<li>
    <div class='thumbnail'>
        <a href='http://blogger9.com'><img src='http://i39.tinypic.com/dcdjky.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.blogger9t.com'>Latest blogger tips</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
<li>
    <div class='thumbnail'>
        <a href='http://blogger9.com'><img src='http://i40.tinypic.com/15i4wav.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.blogger9.com'>10  Blogger Design</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
<li>
    <div class='thumbnail'>
        <a href='http://blogger9.com'><img src='http://i41.tinypic.com/jtsxlt.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.blogger9.com'>Blogger Templates</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
</ul>
</div></div>

Note:- To change the thumbnail image resize your image with dimensions 100*75 and upload it to any image hosting website

* Now save your template ypu are done now.