Şimdi tanıtacağımı eklentide bu uygulamalar gibi Twitter akışınızı canlı olarak gösterebileceğiniz gayet şık bir uygulama.
Uygulamanın orjinali Jquery Marquee kullanılarak hazırlanmış biz bu uygulamayı Türkçeleştirdikten sonra tasarımı üzerinde biraz oynadık sizin de biraz CSS bilginiz varsa daha sonra isterseniz tasarımını kendi blog'unuzun tasarımına uyarlayabilirsiniz.
kendi blog’unuza ekleyebileceğiniz adımları da aşağıda sıraladık.
1.Adım HTML kodlarını ekleyin
Kodları HTML/Javascript Gadget olarak kendi blog’unuza eklemek için gönder yazan butona basmanız yeterli.<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 () {
// Pass in the username you want to display feeds for
this.insertLatestTweets('nyzsmsk01');
},
// This replaces the <p>Loading...</p> with the tweets
insertLatestTweets: function (writershome) {
var limit = 5; // How many feeds do you want?
var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + writershome + '&count=' + limit + '&callback=?';
// Now ajax in the feeds from twitter.com
$.getJSON(url, function (data) {
// We'll start by creating a normal marquee-element for the tweets
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
// Loop through all the tweets and create a link for each
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>';
// Now replace the <p> with our <marquee>-element
$('#twitter p').replaceWith(html);
// The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
Twitter.fancyMarquee();
});
},
// Replaces the marquee-element with a fancy one
fancyMarquee: function () {
// Replace the marquee and do some fancy stuff (taken from remy sharp's website)
$('#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);
});
},
// Takes a date and return the number of days it's been since said date
daysAgo: function (date) {
// TODO: Fix date for IE...
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 + ' days ago';
if (numDays == 0) {
daysAgo = 'today';
}
else if (numDays == 1) {
daysAgo = numDays + ' day ago';
}
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://b1206.hizliresim.com/y/7/7mfty.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>
2.Adım Kendi Twitter kullanıcı adınızı yazın
Kodda yapmanız gereken değişiklik gayet basit kodların içerisinde “bloggermodifiye” yazan bölümü silip kendi Twitter kullanıcı adınızı yazın.
Bunun içinde Sırası ile Kumanda Paneli ➜ Tasarım ➜Sayfa öğeleri yolunu takip edip Gadget ekleyip kaldırdığınız bölümde HTML/Javascript olarak eklediğiniz gadget’ın sol bölümünde yer alan düzenle yazan bağlantıya tıklayın ve açılan pencerede kodlar içerisinde “nyzsmsk01” yazan yere kendi Twitter kullanıcı adınızı yazın.
Not:Daha kolay bulmak için klavyenizdeki ctrl ve f tuşlarına aynı anda basarak açılan arama formunda da aratabilirsiniz.
Bonus++ Gadget tomatik olarak kenar çubuğuna yani sidebara eklenecektir ama siz gadget’ı farenizin imleciyle yakaladıktan sonra istediğiniz her hangi bir bölüme sürükleyip bırakabilirsiniz.
0 yorum:
Yorum Gönder