jQuery Twitter Ticker For Blogger

Introducing one of the best ever jQuey and CSS based Twitter Ticker widget for blogs. This widget is created by Tutorialzine, which uses Twitter’s Search API to display your or your friends latest tweets or blog/website tweets. This widget doesn't required any server side scripting or database its purely developed using jQuery and CSS and can be easily added to any blog or website. It provides up-to 7 twitter usernames, if you add more than two or more twitter usernames, their tweets will be shown together. Installation is very easy just copy and paste the code in the widget. Let's see a preview of this before implementing it on your blog or websites.

jQuery Twitter Ticker Preview

Live Demo

Add jQuery Twitter Ticker To Blogs

1. Go to your Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/Javascript" Widget.

3. Copy and Paste the following code inside the widget.

<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://lh6.googleusercontent.com/-KiRlwLrg_h0/Ty-izxhT05I/AAAAAAAAACo/Kkv2OkN55YQ/s64/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://lh6.googleusercontent.com/-c2H2Lw3NF4M/Ty-izdCx5nI/AAAAAAAAACg/lMDpVR5kDeE/s16/loading.gif.png" 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://lh5.googleusercontent.com/-zyB-SP7RtT4/Ty-iyy-6W9I/AAAAAAAAACc/vEdzkmqQX1E/s350/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://lh6.googleusercontent.com/-RS6RGYWMzjg/Ty-iy8zn-lI/AAAAAAAAACk/DW5A8pMGvz4/s45/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://lh5.googleusercontent.com/-NtPoyrPkEdw/Ty-iyzeam4I/AAAAAAAAACY/gjm6Hb6qTnU/s4/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="http://ravisaivein.googlecode.com/files/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://ravisaivein.googlecode.com/files/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="http://ravisaivein.googlecode.com/files/twitterticker.js"></script>
<script type="text/javascript">
var tweetUsers = ['ravisaive'];
</script>

4. Replace ravisaive with your twitter username.

5. Save yout widget and preview it.

Add Credits goes to http://tutorialzine.com for creating this beautiful widget.