Jquery Twitter Ticker seperti yang boleh anda lihat pada demo di tutorialzine.com , ini adalah satu plugin wordpress yang sangat menarik. Jika anda mempunyai akaun Twitter dan aktif dalam 'Twitter', plugin ni sesuai untuk di pasang pada 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 di bawah.
Langkah 1
Copy kode dibawah ini.
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dPjaZkDGYYSgg45Bf1282cZbrkVhKwBPQ_nIvL9_-RG9tKZFfrfhjdI1CsJwGerq1zduRqNl1f3VEt6kJ9nNmHPLGx2-LhMu-Il1H7nsAMAw9ARXr06u20nTD8uMoRfhAD56INef-_Mi/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:
"Trebuchet MS",sans-serif;text-align:
right;padding-right:20px;text-decoration: none;">
<a
href="http://jeritanblog.blogspot.com/2011/06/cara-pasang-jquery-twitter-ticker-pada.html"><i><span
style="font-size: xx-small;">Get this
widget</span></i></a></div></div>
Penting :
i. Gantikan kod yangg di bold dengan akaun twitter anda.
Akaun Twitter: http://twitter.com/jeritanblog
var tweetUsers = ['jeritanblog'];
Jika anda ingin menggabungkan akaun twitter rakan anda ke,jiran anda atau siapa-siapa
,tambah kod seperti contoh di bawah.
var tweetUsers = ['ratu_petninlaw','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];
2. Tajuk LATEST TWEETS pd kod yang di bold juga boleh di ubah mengikut kesesuaian.
Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :
Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :
2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;
3. Pilih HTML/Javascript;
4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
Semoga Berjaya ^_^
Semoga Berjaya ^_^
0 Ulasan