Pasang jQuery Twitter Ticker

Siapa yang tidak kenal dengan twitter ?
Salah satu jejaring sosial yang sekarang lagi naik daun ini nanti nya akan menggantikan kedudukan facebook yang sampai saat ini masih eksis dan terus jaya di tanah nusantara :p
sekarang kita akan bahas cara pasang jQuery Twitter Ticker, yang nanti nya semua tweeps kamu akan muncul disitu, dan kamu dapat publikasikan nya ke dalam blog. langsung saja,

• login ke akun blogger
  
• pilih rancangan
• pilih tambah gadget --> pilih HTML/ JavaScript
  
• letakkan kode berikut di dalam nya

<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNTcuGTv6C30w0S1TsgefXuhKROYO_OJLXTpd-I3SnNVLoZQbVrlGxgDeMrjzc0qqyljlllWBix2M7Mw8InfAQCleO3DWMoGsoB2pV_PakhaT-qkArPTm3hZUa9IYACnZKAiTaJiWsig/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/AVvXsEg-J8KErVtux1QK0yTdY3bMdMN-NGnLrgZRFjn6QR8NrhkrLxN12IjFS_O3KzJTGkJ0usJcB9jrOECw6rp1UTXtH4_g-9u09ODblhsBWrhwVbJu7zLo45zj2c9ajgn9DEERcpnH9D4TCvo/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/AVvXsEhAlxeEXfNQjrGh4TnvUqK6iJmvYLJAYu3ZrchT9LPEkbdT3fkdrrFPITOeyOAfFlINb7VcvKdFvsYZPRSe13AAwz_YZNiJfnLDHOwV-fiOj5NXL767HcW1e6hjKGTL72PNJcYYA1dUjtQ/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 = ['ID_TWITTER_ANDA','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];
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>

<!--[if lt IE 7]>
<style type="text/css">
div.tweet {
background:none;
border:none;
}

div#twitIcon{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMfj4ArH2oWrEsvkKIia69imRQyVo4wEYKLJQvNrgnKGyUsF4abu-baTle0dRUUgph-mxsysm5cJL7-ahX7KcQAxfssLq8v11tl0PgON6mLoLMiS_XcVk4NDxox5tC0HFuUWx0kmWkck/s1600/twitter_64.png, sizingMethod=crop);
}

div#twitIcon img{
display:none;
}
</style>
<![endif]-->

<div id="twitter-ticker">
<div id="top-bar">

<div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMfj4ArH2oWrEsvkKIia69imRQyVo4wEYKLJQvNrgnKGyUsF4abu-baTle0dRUUgph-mxsysm5cJL7-ahX7KcQAxfssLq8v11tl0PgON6mLoLMiS_XcVk4NDxox5tC0HFuUWx0kmWkck/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h4 class="tut">TWITTERKU</h4>

</div>

<div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfWeSDUNdPT0YVCjM6utKubTkxQswXYeX7RJzfEjFHc0QafFj6jdwU33KTH4vUF-RO66beiQ8q9uqmSMWIhaizQnpnhrD01l0sTrp-TPR0PWwMuTNVU5X6fwk4MfztM3WD-SbiLkgJsQ/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>

• jika sudah selesai jangan lupa di save

Catatan !

Untuk tulisan yang berwarna merah, silahkan kamu edit terlebih dahulu dan sesuaikan dengan nick twitter kamu

Sumber : http://4-jie.blogspot.com/2010/10/pasang-jquery-twitter-ticker.html#ixzz1n7bt1LaW
© COPYRIGHT 2011