Kasım 13, 2012

Blogger'a Hareketli Twitter Akışını Ekleyin - Blogger Eklentileri


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(http://1.bp.blogspot.com/-54S-2NHc4M8/UKJlG67LaAI/AAAAAAAAHDk/W1J_FLnKsl0/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(http://2.bp.blogspot.com/-a7TZEVGIrDc/UKJmhj0_GMI/AAAAAAAAHDw/iDjuxBXgId0/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(http://3.bp.blogspot.com/-rJP9TVSP408/UKJnUZLdTKI/AAAAAAAAHD8/lJPfk_d1yec/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 arada beni twitter'dan da takip edebilirsiniz; bloglamazamani Takipte kal ;) İyi bloglamalar, kolay gelsin.

7 yorum :

allah razı olsun senden, elin kolun agrımasın kodların hepsini kullandım teşekkür ederim :)

@Alican yobaş, bu kadar teşekküre ne gerek vardı. Kolay gelsin. :)


paylaşım için sağolun,yeni bir blog sahibi olarak yardımlarınızı bekliyorum http://yoltarif.blogspot.com/ şimdidden teşekkürler

admin kodu html kısmından ekliyorum ancak twitter paylaşımları görünmüyor. ismi değiştirdim ve faklı birkaç isimdedenedim ama yine olmadı.

@Adsız, Şuan bu kodu kullanıyorum ve sorunsuz çalışıyor. Farklı bloglarda da denedim sorun yok. Sitenize bir göz atabilir miyim ?

Bende de olmadı. Akış görünmüyor kendi hesabımı yazmış olmama rağmen

http://bahcembenim.blogspot.com/

@Bahçem Benim, kodlarda problem var hala çalışmıyor bu eklenti. Çalışmamması bu yüzden

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.