Blogger'a Hareketli Twitter Akış Kodu

Blogger'a Hareketli Twitter Akışını Ekleyin Blogger Eklentileri
Blogunuzda bir değişiklik yapmanın zamanı gelmedi mi ?Twitter akışınıza hareketlilik kazandırmaya ne dersiniz ? Tam da böyle düşünenlere göre çok güzel bir kod ve harika tasarımlar. Genellikle haber sitelerinde kullanılan haber akış bandı şeklinde bir kod. Bu kod ile Twitter'a attığınız twitleri blogunuzda hareketli ve canlı bir şekilde göstereceksiniz. Daha önce blogumda manşet alan olduğu için kullanamadığım bu eklentiyi artık sorunsuz bir şekilde bende kullanmaya başladım. Böylece hem blogumu ziyaret edip hemde twitlerimi ziyaretçilerime sunmuş oluyorum. Kullanmış olduğum 1. koddur. Diğerlerini deneyerek zevkinize göre kullanabilirsiniz.

Peki şimdi ben Twitter Akışıma Blogumda Nasıl Hareketlilik Kazandırırım ?

Aşağıdaki 3 koddan herhangi birini seçip kopyaladıktan sonra, Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript'i seçktikten sonra açılan kutuya kopyaladığınız kodu yapıştırın ve kaydettikten sonra kutuyu kapatın.

Kod 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   <script src="http://artistutorials.googlecode.com/files/jquery.marquee.js"></script>     <script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('bloglamazamani');
},
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 = 'bu gün';
}
else if (numDays == 1) {
daysAgo = numDays + ' 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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jsaI6iOJck6SRieF28r1E3YTT0r1ocy1Cqj4kz-9JlXzi6NZHMcUrnevJMAu95JXjScIWOfmi1RmvBKq0mqrUYd0Vi60LMz5v3BUcBI3aMoT5XrTrNf0b-646ZDMhbvBSvZjFbWuo30/s1600/twitter-akisini-blogger-eklemek-bloglamazamani.png)left center no-repeat ;
padding: 2px 5px 2px 125px;
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: 12px 0 6px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #000;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #0094FF;
}

</style> <div id='twitter'>
<p>
  </p>
</div>

Kod 2

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   <script src="http://bloggermodifiyegad.googlecode.com/files/jquery.marquee.js"></script> 
<script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('bloggermodifiye');
},
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 = 'bu gün';
}
else if (numDays == 1) {
daysAgo = numDays + ' 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:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglTNbrkxBpY3SxwzOzZwDCudBLLf4SQvrWuRkwdflPW2_JXKyadvhRp4h1Ef3an9Fk08ZdyxIEqXyaCjelswn13ZVfOCCJnlE69vdYp0JfUgSjLXSmiNjeAdWB2UYuXoFVTF2BCdZ94Q/s320/twitlerimi-bloguma-eklemek-bloglamazamani.png)left center no-repeat ;
padding: 0px 5px 0px 125px;
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: 10px 0 7px 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>

Kod 3

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   <script src="http://bloggermodifiyegad.googlecode.com/files/jquery.marquee.js"></script> 
 <script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
this.insertLatestTweets('bloggermodifiye');
},
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="2" 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 = 'bu gün';
}
else if (numDays == 1) {
daysAgo = numDays + ' dün';
}
return daysAgo;
}
};
Twitter.init();
//]]>
</script> 

<style>
#top-bar{
width:100%;
height:24px;
background:#fff;
border:1px solid #000;
padding: 0 0 5px 0;

}
#twitter {
background:#ECECEC  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAqCNf0QFLNdhSqdXNhVsRYLytIACLLDkldhFsr7cTQB6UCUQLlDA6N7bWZ4Bnaz913A1lE2B7fnYYVFGjKquiy2AjOjmg2Cwjlsbcy4niiQn141KbE9YOjnOK2DQnwv78N6SIRQszGO0/s320/blogger-icin-twitter-akisi-eklemek-bloglamazamani.png)left center no-repeat ;
padding: 2px 5px 9px 131px;
margin: 0 0 0 0px;
overflow: hidden;
height:20px;
}
#twitter p,
#twitter marquee,
#twitter div {
background:#ECECEC;
float: left;
font: 13px bold helvetica, verdana, sans-serif;
margin: 0 10px 0 0;
padding: 6px 0 6px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #000;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #0094FF;
padding:0;
margin:0 5px;
}

</style>
 <div id='twitter'><p>  </p> </div>

Şimdi Kodda değişiklik yapabileceğiiz yerler;
('bloglamazamani') yazan yeri kendi hesabınız ile değiştirmeyi unutmayın.
var limit = 5 ; buradaki 5 değeri attığınız son 5 twiti blogunuzda gösterir. Dilerseniz 3 dilerseniz 10 yapıp değiştirebilirsiniz.

direction="left" ; ise attığınız twittlerin soldan sağa doğru akmasına yarar dilerseniz değiştrebilirsiniz. ( Ama bence değiştirmeyin ;) )

scrollamount="1" ; ise twitlerin akış hızı değeridir. Dilerseniz hızı arttırabilir veya azaltabilirsiniz.

Şimdilik bu kadar. Sormak istediğiniz herhangi bir soru olursa "YORUM" bölümünde belirtebilirsiniz. Tabii bu