Cara pasang jquery Twitter Ticker di blogspot

Jquery Twitter Ticker seperti yang boleh anda lihat pada demo di tutorialzine.com atau di sidebar blog ini, adalah satu plugin wordpress yang sangat menarik. Jika anda mempunyai akaun Twitter dan aktif ber'Twitter', plugin ini sesuai untuk di pasang di blogspot.

Bagi pengguna wordpress, anda boleh download plugin tersebut di http://tutorialzine.com/2009/10/jquery-twitter-ticker. Bagi pengguna blogger,anda boleh cuba tutorial asalnya di sini(sila klik) ataupun ikut beberapa langkah di bawah.

Langkah 1

Salin kod di bawah dan paste pada HTML/Javascript.(rujuk gambar dibawah).


<style>
#twitter-ticker{
width:100%;
height:230px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
background: #ccc;
color:#666;
display:none;
text-align:left;
}

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

#twitIcon{
position:absolute;
top:-6px;
left:40px;
}

#top-bar{
height:40px;
background:url() repeat-x;
border-bottom:1px solid white;
position:relative;
margin-bottom:8px;
}

.tweet{
padding:5px;
margin:0 8px 8px;
border:2px solid #FDFAFA;
background:#FDFAFA;
width:auto;
overflow:hidden;
}

.tweet .avatar{
float:left;
}

.tweet .user{
float:left;
padding: 0px 0px 0 0;
}

.tweet a {
color:#B30404 ;
font-weight: blod;
font-size:11px;
text-decoration: none;
}

.tweet a:hover {
color: #fc6602;
font-size:11px;
font-weight: normal;
text-decoration: none;
}

.tweet .avatar img{
float:left;
width:50px;
height:50px;
border:1px solid #ccc;
margin:4px 5px 0px 0;
}

.tweet .txt{
font-size:11px;
color:#222121;
margin:2px 2px;
}
.tweet .time{
margin-left:3px;
color:#fff;
white-space:nowrap;
}

#loading{
margin:100px 95px;
}

#twitter-ticker{
margin:-30px 0px -4px;
}

.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 88px;
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 disini'];
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=100");

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="http://1.bp.blogspot.com/_LZtXSNcp76A/TSGFn0L2w2I/AAAAAAAABWA/SNaKxqfd_4s/s1600/twitter_sign.png" width="48" height="48" alt="Twitter icon" /></div>
<h4 class="tut">LATEST TWEETS</h4>

</div>

<div id="tweet-container">
</div><div style="color:#B30404; font-family: &quot;Trebuchet MS&quot;,sans-serif;text-align: right;padding-right:20px;text-decoration: none;">
<a href="http://maribinablog.blogspot.com/2011/01/cara-pasang-jquery-twitter-ticker-di.html"><i><span style="font-size: xx-small;">Get this widget</span></i></a></div></div>

p/s:

1. Gantikan kod yang di bold dengan akaun twitter anda.

Contoh:

Akaun Twitter: http://twitter.com/nescafeaisblog

var tweetUsers = ['nescafeaisblog'];

Jika anda ingin menggabungkan akaun twitter rakan anda, tambah kod seperti contoh di bawah.

var tweetUsers = ['nescafeaisblog','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];

2. Tajuk LATEST TWEETS pada kod yang di bold juga boleh di ubah mengikut kesesuaian.
Cara pasang jquery Twitter Ticker di blogspot

tq bro..
share plugin neh
:)

Salam...
Best ni..
tp buat sementara ni aku cuba utk ringankan lagi blog.
Takpe, nanti aku carigali di sini.
Thanks..

Terima kasih banyak..

terima kasih yah..

This comment has been removed by the author. - Hapus

gue suka entry ni...
salah satu sebabnya, tweet gue ada kat situ..
eheheheee

tq..akhirnya dpt tgk twitter di blog

x jadiiii.........:-(

@chubb90

Kamu salah masuk id. Hanya ambil id yang belakang sahaja. url twitter tak payah masukkan. # pun tak payah.

salam.tweet tuh kuar.just latest tweet x kuar.camne ek..

salam.
knpe kotak latest tweet je ade?
sye nye tweet x kuar pon!

kenape tak de scroll bar kat kotak latest tweet tu?

dapat dah. thank you for sharing ^_^

Dah dapat. thanks, tapi....
nape takde scroll bar? Please please tolongg~~~~

tapi kuar 2 tweets je. cmne nk jadikan byk ea?

yey..da jd...jom twitt..twitt..

boleh x sye share tuto nie?

boleh x ajarkan macam mana nak letakkan FB comment box dalam blog..tqvm

dye tulis Error parsing XML, line 176, column 2: The markup in the document following the root element must be well-formed.
Save templatePreviewClear editsClose mcm mne ni?