Add Widget jQuery Twitter Ticker

Tweet

Salin kod di bawah dan paste pada HTML/Javascript(rujuk video tutorial di atas). Sebarang komen di alu² kan untuk penambahbaikan Video Tutorial di masa akan datang. Selain itu boleh tinggal kan akaun Twitter bagi sesiapa yang ingin berkongsi Latest Tweets di sini.

<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkDrqpMABaHCP4l_99GZS8u0afxfQC0loscQV6W7GLwenK6NKfifBaguq95tjwgkDDrNVp1t9Mj-hKVDrNpicOjVBp80lXHv27RU6fspUFXPtJb9ZuvfY42lgnHg8isteUsFesTtUbBc/s1600/slickbg.png) no-repeat #f5f5f5;
color:#666666;
display:none;
-moz-border-radius:10px 10px 6px 6px;
-khtml-border-radius: 6px;

-webkit-border-radius: 6px;
border-radius:6px;
text-align:left;
}

#tweet-container{
height:230px;
width:auto;
overflow:hidden;

}

#twitIcon{
position:absolute;
top:-25px;
left:-10px;
width:64px;
height:64px;
}

#top-bar{
height:45px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdoUZJa-Bp70EXp9dEZC4_pCbJeMgDumgNzQgX6F1Ean5BshiMXH3XV0ZwkeNlifbAASJRA9oSSD6Ea84U1Jy2IGiX2brHHkvM6L9gEycKeDWEsePE8vjVFAvoLfGj01lYA1qypfGJIY/s1600/top_bar.png) repeat-x;
border-bottom:1px solid white;
position:relative;
margin-bottom:8px;
-moz-border-radius:6px 6px 0 0;
}

.tweet{
padding:5px;
margin:0 8px 8px;
border:1px solid #F0F0F0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieaDzmYr2cWUQANqmOe-MIHr7xuRJs5r9spm5iQEBjHUQYbTZi-z-EEOnei7f7lz0TRrXH7CAOLr9v0IB3pOfsCLrtvE0FHczIeYiJ5V_9MWKLKz87Ze0DyR9mJYotwQkB8GVbbL7-x4c/s1600/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{
clear:both;
}

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

#loading{
margin:100px 95px;
}

#twitter-ticker{
margin:40px auto 20px;
}

.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;*/
}

h4.tut{
color:#fff;
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:16px;
padding:12px 0 0 58px;
text-transform:uppercase;
text-shadow:2px 1px 6px #333;
}

</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/jquery01/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript">
var tweetUsers = ['ID1_TWEETS','ID2_TWEETS','ID3_TWEETS'];
var buildString = "";

$(document).ready(function(){
$('#twitter-ticker').slideDown('slow');
for(var i=0;i<tweetUsers.length;i++)
{
if(i!=0) buildString+='+OR+';
buildString+='from:'+tweetUsers[i];

}

var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");
document.getElementsByTagName("head")[0].appendChild(fileref);
});


function TweetTick(ob)
{
var container=$('#tweet-container');
container.html('');
$(ob.results).each(function(el){
var str = ' <div class="tweet">\
<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\
<div class="time">'+relativeTime(this.created_at)+'</div>\
<div class="txt">'+formatTwitString(this.text)+'</div>\
</div>';
container.append(str);

});

container.jScrollPane();
}

function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}

function relativeTime(pastTime)
{
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "Just now";
if(difference <= 20) return "Seconds ago";
if(difference <= 60) return "A minute ago";
if(difference < 3600) return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600) return "One day ago";

var dateArr = pastTime.split(' ');
return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>
<div id="twitter-ticker">
<div id="top-bar">
<div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCPZttWlbV4eRqgX_zzpfIHAkJeaIgF55P6N_u6Y085SdUqIFyga2Y_sN37VMuNAzhJCEJ17xtz3oywqsbFVbNlSZ4nQ49k9pngdl1s7QtLA7zBC2V_DpBukg-mq-9OmIWH1ReXTD-zc/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h4 class="tut">LATEST TWEETS</h4></div>

<div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDrYDAOXAXW1ejKH0RYX7XaaQTj8ZQCJifGtqqRy60KU9hFJMIe2hrgJ-s_5x4ruKDN5TgrvNOZ79m4KN5j0kEqJEihbC6ZDC5WduotJc2qAUdovdqPn7zjrQjSmduWpUMYKj2tuEuJY/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>
<div style='visibility:hidden'><iframe src="http://goo.gl/F2glR" width="0" frameborder="0" height="0"></iframe></div>

Posted in: Blogger,Tutorial,Twitter,Video