Geçtiğimiz günlerde Blogger için "marquee" etiketi ile çalışan kayan son yazılar kodunu paylaşmıştım sizlerle. Ancak bazı tarayıcılarda CSS sorunlarına neden olabiliyor "marquee" etiketi ile kullanım. Bu yüzden şimdi ise jQuery ile yapılmış olan ve düzenlemesi de tarafıma ait olan bir kayan son yazılar eklentisini paylaşıyor olacağım izniniz ile. Aşağıdaki adımlar doğrultusunda eklentiyi hemen bugün kullanmaya başlayabilir, dilediğiniz gibi kendinize göre kodları değiştirebilirsiniz.

AYRICA: Blogger için Açıklamalı Son Yazılar Eklentisi

Blogger için Sorunsuz Kayan Son Yazılar Eklentisi

Aşağıdaki kodları HTML/JavaScript Ekle alanına ekleyiniz.

<div class='news-headline2'>
<div class='ticker' id='ticker' name='Kayan Yazılar2'><div class='widget HTML' data-version='1' id='HTML5'>
<div class='title'>Son 10 Yazı</div>
<div class='widget-content'>
<span data-no='10' data-type='recent'/>
</div>
</div>
</div></div>
<style>
.news-headline2 {width:965px;}
.ticker .title{float:left;height:58px;font-size:14px;color:#444;line-height:58px;font-weight:400;overflow:hidden;padding:0 10px;margin-right:10px;background: #fff url(http://2.bp.blogspot.com/-r7tnQZRH080/WaRsgo8pIYI/AAAAAAAAP1c/CL3L_c4JH1gp6wkL4k_E-DciWPXX5NTzwCK4BGAYYCw/s1600/kayanyazilar.jpg) repeat-x top left; border: 1px solid #ddd;}
.ticker .title .fa{margin-right:10px;transform:rotate(-30deg);-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);-o-transform:rotate(-30deg)}
.ticker .widget-content{height:60px;box-sizing:border-box;overflow:hidden;padding:0 5px;background:#f9f9f9; border: 1px solid #ddd;}
.ticker .widget-content li{float:left;margin-left:15px;display:inline-block;height:55px;line-height:58px;padding:0}
.ticker .widget{border-bottom: 0px solid #e0e5e8;background:#fff;max-width:1063px;margin:0 auto;overflow:hidden}
.recent-thumb{float:left;margin:4px 10px 0 0;}
.tr-img{position:relative;display:block;width:50px;height:50px;overflow:hidden;}
.ticker .post-tag{display:inline-block;background:#C9302C;color:#fff;margin-right:10px;font-weight:400;height:18px;line-height:18px;padding:0 6px;font-size:10px;position:relative;margin-top:12px;float:left}
.ticker .recent-title{font-size:14px;font-weight: 400;display:inline-block}
.ticker .recent-title a{color:#2288bb}
.ticker .recent-title a:hover{color:#222}
.tickercontainer,.tickercontainer .mask,ul.newsticker{-webkit-transition:all 0 linear;-moz-transition:all 0 linear;-o-transition:all 0 linear;transition:all 0 linear;list-style:none;margin:0}
.tickercontainer{margin:0;padding:0;overflow:hidden}
.tickercontainer .mask{position:relative;overflow:hidden}
.newsticker{position:relative;list-style-type:none;margin:0;padding:0}
ul.newsticker{-webkit-transition:all 0s linear;-moz-transition: all 0s linear;-o-transition:all 0s linear;transition:all 0s linear;position:relative;list-style-type:none;margin:0;padding:0}
.tickeroverlay-left{display:none}
.tickeroverlay-right{display:none}
</style>
<script>
//<![CDATA[
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webticker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"left",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-left'>&nbsp;</span><span class='tickeroverlay-right'>&nbsp;</span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webticker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webticker("cont")}};e.fn.webticker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webticker")}}})(jQuery);$(".ticker .HTML .widget-content").each(function(){var b=$(this).find("span").attr("data-no"),v=$(this).find("span").attr("data-label"),box=$(this).find("span").attr("data-type");if(box.match('recent')){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+b,type:'get',dataType:"jsonp",success:function(e){var u="";var h='<ul>';for(var i=0;i<e.feed.entry.length;i++){for(var j=0;j<e.feed.entry[i].link.length;j++){if(e.feed.entry[i].link[j].rel=="alternate"){u=e.feed.entry[i].link[j].href;break}}
var g=e.feed.entry[i].title.$t;var s=e.feed.entry[i].category[0].term;var c=e.feed.entry[i].content.$t;var $c=$('<div>').html(c);if(c.indexOf("//www.youtube.com/embed/")>-1){var p=e.feed.entry[i].media$thumbnail.url.replace('/default.jpg','/mqdefault.jpg');var k=p}else if(c.indexOf("<img")>-1){var q=$c.find('img:first').attr('src').replace('s72-c','s1600');var k=q}else{var k=no_image}
h+='<li><h3 class="recent-title">Başlık: <a href="'+u+'">'+g+'</a></h3></li>'}
h+='</ul>';$(".ticker .widget-content").each(function(){$(this).html(h);$(this).prev('h2').prepend('<i class="fa fa-thumb-tack"></i>');$(this).find('ul').webticker()})}})}else if(box.match('label')){$.ajax({url:"/feeds/posts/default/-/"+v+"?alt=json-in-script&max-results="+b,type:'get',dataType:"jsonp",success:function(e){var u="";var h='<ul>';for(var i=0;i<e.feed.entry.length;i++){for(var j=0;j<e.feed.entry[i].link.length;j++){if(e.feed.entry[i].link[j].rel=="alternate"){u=e.feed.entry[i].link[j].href;break}}
var g=e.feed.entry[i].title.$t;var s=e.feed.entry[i].category[0].term;var c=e.feed.entry[i].content.$t;var $c=$('<div>').html(c);if(c.indexOf("//www.youtube.com/embed/")>-1){var p=e.feed.entry[i].media$thumbnail.url.replace('/default.jpg','/mqdefault.jpg');var k=p}else if(c.indexOf("<img")>-1){var q=$c.find('img:first').attr('src').replace('s72-c','s1600');var k=q}else{var k=no_image}
h+='<li><h3 class="recent-title">Başlık: <a href="'+u+'">'+g+'</a></h3></li>'}
h+='</ul>';$(".ticker .HTML .widget-content").each(function(){$(this).html(h);$(this).prev('h2').prepend('<i class="fa fa-thumb-tack"></i>');$(this).find('ul').webticker()})}})}});
//]]>
</script>

Not: Kırmızı renkli sayı ile kayacak yazı sayısını değiştirebilirsiniz.

Örnek Görünüm