Welcome to my blog. Feel free to read my stories and etc. I rarely update this blog. Sixteen.


home. | le owner. | stuff. | affiliates. | flavors. | chatbox.

Jumaat, 8 April 2011

Tutorial - Cara Pasang Jquery Twitter Ticker

Jquery Twitter Ticker sperti yg bleh anda lihat pd demo di tutorialzine.com atau di sidebar blog ni, adalah satu plugin wordpress yang sgt mnarik. Jika anda mempunyai akaun Twitter dan aktif ber'Twitter', plugin ni sesuai utk di pasang di blogspot.


Bgi 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.


1.Copy kod di bawah n paste pd HTML/Javascript.......(Rujuk gmbr kt bwh)




<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 :

i. Gntikn kod yg di bold dengan akaun twitter anda.......


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


var tweetUsers = ['ratu_petninlaw'];


Jika anda ingin menggabungkan akaun twitter rakan anda ke,jiran anda ke,spe2 jelah....Klau nk,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 leh di ubah mengikut kesesuaian.

Kalau jdi,ckp thanks kt sye...klau x jdi bgitau sye ok!!Erm tu je...papai...


4 ulasan:

Alya Hadiera Harun berkata...

x paham lah :( akaun twitter tu nak letak kat mane ?

Ratu Petninlaw berkata...

@Alya Hadiera Harun awk taruk kt html/javascript la..

Wanny J berkata...

untuk pengguna blogskin ade tak? please! untuk yg blog versi lame punye. tolong buatkan :)

Nurul Nurfarahin berkata...

@Wanny J : nanti saya buat tutonye ea :)