Menampilkan update Twitter pada blog | pasang jQuery Twitter Ticker ~ KHAIRUL ABDAL

Khairul Abdal- 20 April 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini saya akan membawa postingan terbaru dan terhangat.

Jika tertarik berikut cara Memasang update Twitter pada blog
Login>> rancangan >> elemen halaman >> tambah gadget >> HTML/Javascript..

<style>
#twitter-ticker{
width:200px;
height:300px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwNMcoF3Bx6Lkar1OFE4pZ15m37mhCQepZbflhNTBEelf-bxyxOrAWyhV0PcOBr-UJPeKcmTeov9s_iu6uW2JUE8d7FtuuXrI5gKGgtIsn86xATQbb2C1ZbG_FwTZuIg0pqnSDrJx06LA/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/AVvXsEgEeiQkYtQijgbIs6fIozC51Phps3jgStzYTi-hnRuK34R-zhsFCG2g8vCkYtwlU4ruF8RTT_l7YrpX1We6IuH75mTjYym_x7rm2I5QNTrqfgOgTjEMyP30qhm_YUdSBlvrgGI0Ku5erVk/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/AVvXsEiVKlz2CSrYOoHtGfsQsflZm8SVGxkZHExEX9oVOjE34N12OpTSQd0wu4dTkwYNm-M8Qo4gb7NaXHHvQhwzR6fOc6p7oos8mGNt0fSbOoGLBMe0_0nnyhccVa-mmwdIiEChZYS6fVyvA-s/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>



<div id="twitter-ticker">
<div id="top-bar">

<div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5J-QdXEIvlwhXKq8h1ByT1D9-gnD4AwaTwrY_PKFzFlwTOEZZ4LD6DaeCe83CMSMferHYMGK9PlnDjErMroNm31j32XF4AahOZ2qt-s0RnkgO4BupfL0rsPBCR179xFqbgcna_73ZHg/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/AVvXsEj2dHLWdSxTFSAKuRR9uNjf23wIGkQg0795cJzJso1SqTuNFkImK4q-WLEJ8nE6BN6DuQnvr67x-p41UNJOMF9A9luxHhbiDy5BVehRjbrZ8gTN9HRkNbehfcHp1Nav8Ew2QXHnKhN7nHU/s1600/loading.gif" width="16" height="11" alt="Loading.." /></div>

catatan:
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 pada ID_TWITTER1,ID_TWITTER2 danID_TWITTER3. Jika tidak, hapus tulisan ID_TWITTER
contoh: var tweetUsers = ['Akun twitt Anda','','',''];

2. Pada TWITTER SAYA Ubah dan sesuaikan..?
SImpan

Senang telah berbagi informasi dan ilmu kepada kawan dan semuanya... Terima kasih telah berkunjung hari ini,untuk membaca sebuah Artikel yang tiada artinya Wassalamualaikum....

Cara Merubah Tampilan Profil Twitter Khairul Abdal-29 November 2012 Selamat Datang Di blog tercinta anda,Blog ini sedang mempunyai arti
cara instalasi joomlaKhairul Abdal-27 April 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini
2 Cara Membuat Widget Rating Bintang di Post BlogKhairul Abdal-7 Juli 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini sa
Cara Membuat Kotak Komentar Twitter,Facebook,Blog BerdampnganKhairul Abdal-18 mei 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini sa
Cara Mempercepat Booting Windows 7Khairul Abdal- Selamat Datang Di blog tercinta anda,Blog ini sedang mempunyai artikel yang menarik
Tutorial Install Google OS di VirtualBox Khairul Abdal- Selamat Datang Di blog tercinta anda,Blog ini sedang mempunyai artikel yang menarik

3 komentar

Click here for komentar

irul

admin

Friday, April 20, 2012 at 3:49:00 PM GMT+7 ×

thanks infonya ya gan

khairulabdal

Friday, April 20, 2012 at 3:51:00 PM GMT+7 ×

sama sama

Akir

Friday, April 20, 2012 at 3:54:00 PM GMT+7 ×

Kunjungan gan...mantabs

1.Komentarlah Dengan Memakai Account Google dan Open ID
2.Komentarlah Dengan Baik atau Sopan
3.Jangan Kirim SPAM ConversionConversion EmoticonEmoticon