Bu eklenti sayesinde isminden de anlaşılacağı gibi blogunuzda son tweetlerinizi gösterebilirsiniz. Bunun için aşağıda bulunan eklentiyi blogunuzda uygun bir yer eklemeniz yeterli olacaktır. İsterseniz HTML/JS gadgetına da ekleyebilirsiniz.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://dl-web.dropbox.com/get/Photos/Alb%C3%BCm/jquery.marquee.js?w=AABSDeXRZSvjKf_Aw5Yvo_22U4Z4T-iaMZElKu92Sw06QA"></script>
<script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('ardaerakman');
},
insertLatestTweets: function (writershome) {
var limit = 5;
var url = 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=false&screen_name=' + writershome + '&count=' + limit + '&callback=?';
$.getJSON(url, function (data) {
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
for (var i in data) {
html += '<a href="http://twitter.com/' + writershome + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}
html += '</marquee>';
$('#twitter p').replaceWith(html);
Twitter.fancyMarquee();
});
},
fancyMarquee: function () {
$('#twitter marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},
daysAgo: function (date) {
if ($.browser.msie) {
return '1 day ago';
}
var d = new Date(date).getTime();
var n = new Date().getTime();
var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' gün önce';
if (numDays == 0) {
daysAgo = 'bugün';
}
else if (numDays == 1) {
daysAgo = ' dün';
}
return daysAgo;
}
};
Twitter.init();
//]]>
</script>
<style>
#top-bar{
width:100%;
height:30px;
background:#fff;
border:1px solid #000;
padding: 0 0 5px 0;
}
#twitter {
background:#6b6b6b url(http://m1304.hizliresim.com/18/w/mk43m.png)left center no-repeat ;
padding: 9px 5px 0px 45px;
margin: 0 0 0 0px;
overflow: hidden;
}
#twitter p,
#twitter marquee,
#twitter div {
float: left;
font: 13px bold helvetica, verdana, sans-serif;
margin: 0 10px 0 0;
padding: 0 0 9px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #fff;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #00ACEE;
}
</style> <div id='twitter'><p> </p> </div>
Kodlar arasında kalın punto ile belirttiğim yerleri değiştirebilirsiniz. Ben bu değişkenlerin neye yaradıklarını sizlere anlatayım.
- ardaerakman yerine kendi twitter kullanıcı adınızı (ID) yazmalısınız.
- var limit = 5; buradaki sayısal veri gösterilecek tweet sayısıdır. Arttırabilir veya azaltabilirsiniz.
- CSS kodları arasında ki renk, boyut gibi değişkenlerle oynayabilir, tasarımınıza uygun hale getirebilirsiniz.
Önizleme
