Jquery Twitter Ticker silahkan anda lihat pada gambar diatas, yaitu gadget yang bisa berhubungan dengan akun twitter anda atau twitter blog anda..
Jika tertarik berikut cara Memasang update Twitter pada blog
Loging >> rancangan >> elemen halaman >> tambah gadget >> HTML/Javascript..
<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MWhlLkBSCa21YfpBVd_8-dgFfuSYoHn58d5JibRXb5Ri6SPGhKH5pGXgVbDcMj05OUc7zACYomAt_-Czy90gECG_99puQhZD-oEAnVaGoOaCQsbmFcylFx06O9gW7Qp56fSjeTGZAEo/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/AVvXsEi0PPEospVDhdfR3YL4SyNaeL2fZX4mrjCeSJ9EuIm3VR4fF18oyrb0t1wVA42t0g0PRcJxQArPfaejGnpJkSRLwbFwfrz4Ry26VBzF5qKRbgL4EWuZrRutNMsE1Ga24EKKrBZrjyV4Sgk/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/AVvXsEhOhF79kMtKeAug26Xc6m3bBrC5i5NN22pHpbEW2w0rXMkAyFPtr66zaQChHp-nT_aUBwjxz8BBqCFWBnkSCkQvhNCx4jhSoopEH6T0JJxbBPsxlNduhtyBuVtmBQCnWLkR5AaprsvNWgw/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/AVvXsEigayDV7HQopNvssZrQMoU1HB2t3tqgXDGi1ysa4gg50g4V9LJxWoPyP_16ee9Hnv3buNsS8Un5VkC7sV1u7_SqQD1sNL_l7RnUO5_IhvFbUZNdvZnvNg6kjc8tebNeiMb4h8XKTGe1Ne0/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/AVvXsEigayDV7HQopNvssZrQMoU1HB2t3tqgXDGi1ysa4gg50g4V9LJxWoPyP_16ee9Hnv3buNsS8Un5VkC7sV1u7_SqQD1sNL_l7RnUO5_IhvFbUZNdvZnvNg6kjc8tebNeiMb4h8XKTGe1Ne0/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/AVvXsEh4KC9ixmsM1PccOycwEQ9TYsZm_AGabGG-LTnk_6jvmkmIszlLvjNraVwN5lRT_HR6T2gbluG6JX1_pqLJnwIxigY3dKhlmHuO6lehvypyHWJWiUzgBJPAX9r5U5h8UU89ON6oIsY09xk/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>
p/s:
1. Ganti kode yang di bold dengan akun twitter. Atau akun teman anda
Contoh:
Akun Twitter: http://twitter.com/Akun twitter Anda
var tweetUsers = ['Akun twitt Anda','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];
Jika anda ingin menambah akaun twitter teman anda, gantikan padaID_TWITTER1,ID_TWITTER2 dan ID_TWITTER3. Jika tidak, hapus tulisanID_TWITTER
contoh: var tweetUsers = ['Akun twitt Anda','','',''];
