Twitter Butonları Yeni

• Twitter akışınıza Hareket Katın

Şimdi bu eklentide anlatacağım gibi bu uygulamada twitter akışınızı canlı olarak bloggerde göstereceğiniz güzel bir uygulama olup dikkat çekici olması nedeniyle işlevsel bir eklentidir.
Bu uygulamanın orjinali Jquery Marquee burda bulabilirsiniz.Site ingilizce olmasından dolayı siteyi türkçeleştirdik ve bıraz CSS bilgisi olan varsa tasarımı kendi sitenize ve kendinize göre tasarlayabilirsiniz.

Kendi Blogger sitenize bu uygulamayı eklemek için aşağıda anlatımını uygulayın...
1.Adım:  HTML Kodlarını Ekleyin...
Aşağıdaki seceneklerden istediğinizi secip blogger sitenize gadget olarak ekleyebilirsiniz.
Kumanda Paneli>Yerleşim>Gadget Ekle>HTML/Javascript yolunu takip edip aşağıdaki seçmiş olduğunuz gadgetein içine yapıştırıp kaydedin.

<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('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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLec33WrX8aSF39eUERJqzhonv1N8jGChvnXba80uGbVkp0eUvAwHwJMdCsuPfEWBfK4tWy_KfA-FRiM2rjA2vn-ObowkgqXQ0lE1HJcijPYt_yulQp_PWUe1iEO334xvEamU9iD1iMN0/s1600/twitter_logo_right+%25281%2529.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>

<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/AVvXsEivGgXHDE0MBSuD1rYR6UyhFNWbgYrhdc_-Z7MO01e4I_MnxnEKOlLzcmQksmSCmUIjLUvJWfggqaov8gYYtiT-af51S3engbG3fmSpbnQ1_2lacNIf6pqBIuxTLO2QT3R7WOmwmo5HKPgX/s320/twitter-bird-dark-bgs.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>

<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/AVvXsEgoWdfzovWKiOyEJ_hMA6xr5tGWfG5Kmjj3HtdfPPRyJBsgdqoKbCdRr1CxyJiUR39VrexEwQUAm3j2XX-YXYpP3qV3ld11lOZhptOSLGjKxGgKmJDC0wO_iH-GFDqjh4O3psyKbV9Ov57e/s320/twitter-logo-bg.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>

2.Adım Kendi Twitter kullanıcı adınızı yazın
Kodlar içerisinde yapmanız gereken değişiklikler,kodlar içerisinde "BilgiCafem61" yazan yeri silip kendi twitter kullanıcı adınızı yazmak. 

Eklentiyi Özelleştirin:
var limit=5; yazan yerde sizin 5 tivit yazınızın gösterildiği anlamına geliyor.Burda yazan 5 sayısın ister azaltır isterseniz çoğaltabilirsiniz.

direction="left" yazan kod akışın soldan sağa olduğunu gösterir.Eğer siz bu kodu direction="left" diye yani "left" yerine "right" değiştirirseniz akış sağdan sola doğru başlar.

scrollamount="1" kod ise akışın hızını belirler.Burdaki sayıyı siz artırabilir veya azaltabilirsiniz...

• Blog'unuz için Twitter Follow Butonu

Üste gördüğünüz gibi bu eklentiyi Blogger blogunuza eklemek için kısaca aşağıda anlatcağım.
Twitter'in arasına yeni eklenen Fallow (takip et) butonu eski butonlara göre daha kullanışlı ve görsel konudan bıraz daha dikkat çekici olmasında dolayı istediğiniz yer yere ekleyebilir yayınlayabilirsiniz...
Eski butonları daha önce görmeyenler için bir kez daha linki verelim yeni twitter Follow butonu eklemek için aşağıda anlatıma geçelim.
Düğmeyi kendi blog'unuza eklemek için önce buradan sayfaya giriş yapın.

Daha sonra üst resimde gösterilen yerleri kendi twitter adınızı,isteğiniz gibi ayarlayıp sağ taraftaki kodu kopyalayıp isterseniz yazılarınıza,ister gadget olarak ekleyin...

Veya küçük bir kod ile animasyonlu twitter butonu sitenize ekleyebilirsiniz.
Kodu ve görünümünü alt kısımda bulabilirsiniz;

  Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.