The Jquery twitter widget is an awesome twitter widget that shows your twitter account's recent activities. A nice twitter widget suits best with blogger and helpful for increasing followers.
Just view a nice demo
Add Widget On Blogger
Go to Blogger Dashboard → Edit HTML → Page Element
Now Add a HTML/Javascript widget and copy the following code in 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 = ['bestrafi'];
</script>
Dont forget to replace with your twitter username
Now save and done
Please comment here and share our articles if you like
Tuesday, April 17, 2012
Show JQuery Twitter Recent Activities Widget To Blogger
If you enjoyed this post please subscribe to me for free updates!
 |  |  |  |  |
Posts By AUTHOR
Hi, I Am the founder of ALLBLOGGINGTIPZ. I like Blogging. It's Blogging is my passion.
Subscribe to:
Post Comments (Atom)
0 comments:
Click Here To add Comment