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).
Salin kod di bawah dan paste pada HTML/Javascript.(rujuk gambar dibawah).
<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73noA0-fe9fbtU6fDnWlAwiJIhydVHFdYbJs827EtXRkW_WhGMJdhdlkhACiQZNHp8tXFdmle7UmS9P8GMoMvJO9-9ad0oS5c5LFDcDMtpk1b5eUI0aV9ah0b_kk5kDL17u5kVeeaqbM/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/AVvXsEjQT0ATCKsl-S-LgZAxCHDlfOtGyFQ2UnDpQJhlE-3Gclm3R7aBCIbJ_H52rLpm3aMg_s_PQ18wyZX9NJQXDMqVWeTPDV_ffQ79xf1CHm70YgMVtfesPuwbeXACBbdTbAbwOFVrcRLmpoU/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/AVvXsEiE_yvDtxaPqTa7qAp0sjxnhsYuWkvVcQ8FbwpjWV8GImOXhF3xXWvsSBWZzbeesi2g239Tt-c7cMdKC3nB-4OvdZ2QbP32hJWuB0oh3VNENVN3P329Fr4kG4Z7x-10R6F2tpsANo9lcJM/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/AVvXsEgW3PKqONQQ6jWYiW7gLMjzrs0qqJVsrpiKF67eXl6Qv7CQLugyV1zROHRv5Jycr5Gddsv1Zt9KIlEbPI1e3asIY1j83Kf_de_NG2ihqk1i-HJEEG01qaW7MdiDn7e3oEz1dVEIYVOVUJ4/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/AVvXsEgW3PKqONQQ6jWYiW7gLMjzrs0qqJVsrpiKF67eXl6Qv7CQLugyV1zROHRv5Jycr5Gddsv1Zt9KIlEbPI1e3asIY1j83Kf_de_NG2ihqk1i-HJEEG01qaW7MdiDn7e3oEz1dVEIYVOVUJ4/s1600/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h4 class="tut">TWITTER SAYA</h4>
</div>
<div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6assifsCJnG-9a8P_FD1Us3GGsS6VHanB9RJhj2Q4dbnWKaXYfOjKAAhyphenhyphenbIbZhYr-iWAIG1MIGGsZbIcmIh4LHh_dO5Z9pHAAb7eiUO5BfpSgO2oVVvwLqh8ljqwben-df8trrwAgh5k/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>
p/s:
1. Gantikan kod yang di bold dengan akaun twitter anda atau rakan-rakan anda.
Contoh:
Akaun Twitter: http://twitter.com/zoomartis
Jika anda ingin menambah akaun twitter rakan anda, gantikan pada ID_TWITTER1,ID_TWITTER2 dan ID_TWITTER3. Jika tiada, hanya padam ID tersebut seperti contoh di bawah.
2. Tajuk TWITTER SAYA pada kod yang di bold juga boleh di ubah mengikut kesesuaian.
3. Jika anda mempunyai akaun Twitter dan ingin di kongsi di sini, sila tinggalkan ID anda di ruangan komen.
1. Gantikan kod yang di bold dengan akaun twitter anda atau rakan-rakan anda.
Contoh:
Akaun Twitter: http://twitter.com/zoomartis
var tweetUsers = ['zoomartis','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];
Jika anda ingin menambah akaun twitter rakan anda, gantikan pada ID_TWITTER1,ID_TWITTER2 dan ID_TWITTER3. Jika tiada, hanya padam ID tersebut seperti contoh di bawah.
var tweetUsers = ['zoomartis','','',''];
2. Tajuk TWITTER SAYA pada kod yang di bold juga boleh di ubah mengikut kesesuaian.
3. Jika anda mempunyai akaun Twitter dan ingin di kongsi di sini, sila tinggalkan ID anda di ruangan komen.
