twitter ticker widget for blogger

Credits for creating this tutorial http://tutorialzine.com.
jQuery & CSS twitter ticker which utilizes Twitter’s Search API to show your or your friends’ latest tweets. the ticker will be easily included into blogger, easily modify your twitter username,and add upto 7 users.Add to your blogger by clicking below button.Demo

After adding to blogger you need to change the username to your's
Find var tweetUsers =['fuzionpro']; it will be at the last part of the code then change green highlighted with your username.

Source code:

<div id="twitter-ticker">
<!-- Twitter container, hidden by CSS and shown if JS is present -->

 <div id="top-bar">
 <!-- This contains the title and icon -->

 <div id="twitIcon"><img src="https://sites.google.com/site/fuzionproblogger/home/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
 <!-- The twitter icon -->

 <h2 class="tut">My tweets</h2>
 <!-- Title -->

 </div>

 <div id="tweet-container"><img id="loading" src="https://sites.google.com/site/fuzionproblogger/home/loading.gif" width="16" height="11" alt="Loading.." /></div>
 <!-- The loading gif animation - hidden once the tweets are loaded -->

 <div id="scroll"></div>
 <!-- Container for the tweets -->

</div>
<style>
h2.tut{
 /* This is the "MY TWEETS" title */
 color:white;
 font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
 font-size:16px;
 padding:12px 0 0 58px;
 text-transform:uppercase;

 /* The CSS3 text-shadow property */
 text-shadow:2px 1px 6px #333;
}

#twitter-ticker{
 /* Styling the ticker */
 width:200px;
 height:300px;
 background:url(https://sites.google.com/site/fuzionproblogger/home/slickbg.png) no-repeat #f5f5f5;
 color:#666666;
 display:none;

 /* Rounded corners */
 -moz-border-radius:10px 10px 6px 6px;
 -khtml-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius:6px;

 text-align:left;
}

#tweet-container{
 /* This is where the tweets are inserted */
 height:230px;
 width:auto;
 overflow:hidden;
}

#twitIcon{
 /* Positioning the icon holder absolutely and moving it to the upper-left */
 position:absolute;
 top:-25px;
 left:-10px;
 width:64px;
 height:64px;
}

#top-bar{
 height:45px;
 background:url(https://sites.google.com/site/fuzionproblogger/home/top_bar.png) repeat-x;
 border-bottom:1px solid white;
 position:relative;
 margin-bottom:8px;

 /* Rounding the top part of the ticker, works only in Firefox unfortunately */
 -moz-border-radius:6px 6px 0 0;
}

.tweet{
 /* Affects the tweets */
 padding:5px;
 margin:0 8px 8px;

 border:1px solid #F0F0F0;
 background:url(https://sites.google.com/site/fuzionproblogger/home/transparent.png);

 width:auto;
 overflow:hidden;
}

.tweet .avatar,
.tweet .user,
.tweet .time{
 float:left;
}

.tweet .time{
 text-transform:uppercase;
 font-size:10px;
 color:#AAAAAA;
 white-space:nowrap;
}

.tweet .avatar img{
 width:36px;
 height:36px;
 border:2px solid #eeeeee;
 margin:0 5px 5px 0;
}

.tweet .txt{
 /* Using the text container to clear the floats */
 clear:both;
}

.tweet .user{
 font-weight:bold;
}

a, a:visited {
 /* Styling the links */
 color:#00BBFF;
 text-decoration:none;
 outline:none;
}

a:hover{
 text-decoration:underline;
}

#loading{
 /* The loading gif animation */
 margin:100px 95px;
}

.jScrollPaneContainer {
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.jScrollPaneTrack {
 position: absolute;
 cursor: pointer;
 right:4px;
 top:0;
 height: 100%;
 background: #ddd;
}
.jScrollPaneDrag {
 position: absolute;
 background: #999;
 cursor: pointer;
 overflow: hidden;
}
.jScrollPaneDragTop {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
}
.jScrollPaneDragBottom {
 position: absolute;
 bottom: 0;
 left: 0;
 overflow: hidden;
}
a.jScrollArrowUp {
 display: block;
 position: absolute;
 z-index: 1;
 top: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 /*background-color: #666;*/
 height: 9px;
}
a.jScrollArrowUp:hover {
 /*background-color: #f60;*/
}

a.jScrollArrowDown {
 display: block;
 position: absolute;
 z-index: 1;
 bottom: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 /*background-color: #666;*/
 height: 9px;
}
a.jScrollArrowDown:hover {
 /*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
 /*background-color: #f00;*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/fuzionproblogger/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/fuzionproblogger/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/fuzionproblogger/twitterticker1.js"></script>
<script type="text/javascript">
var tweetUsers = ['fuzionpro'];
</script>

Add horizontal twitter ticker widget to blogger