Blogger'da en çok sevdiğim bir eklentiyi sizlerle paylaşmak istiyorum. İlgili eklentiyi uzun süreler çerçevesinde düzenledim ve kompakt bir hâle gelmesini sağladım. Sizlerin yapması gereken neredeyse hiçbir şey kalmadı. Aşağıdaki kodları HTML/JavaScript alanına eklemeniz bu yönde yeterli olacaktır. Kodlardaki kırmızı alanları ise kendinize göre değiştirebilirsiniz. Resimli kayan son yazılar eklentisi tam otomatik olarak çalışmakta olup, alanında en iyi eklentilerdendir.

AYRICA: Blogger için Admin Kontrol Paneli Eklentisi

Blogger için Resimli Kayan Son Yazılar Eklentisi

<div class='news-headline'>
<div class='ticker' id='ticker' name='Kayan Yazılar'><div class='widget HTML' data-version='1' id='HTML5'>
<div class='title'>Etiket Adı</div>
<div class='widget-content'>
<span data-type="label" data-label="Etiket" data-no="10"></span>
</div>
</div>
</div></div>
<style>
.news-headline {width:610px;}
.ticker .title{float:left;height:58px;font-size:14px;color:#444;line-height:58px;font-weight:400;overflow:hidden;padding:0 10px;margin-right:5px;background: #d7d7d7 url("http://4.bp.blogspot.com/-DFZc35VDPLo/WRxnEC0JIRI/AAAAAAAAO6g/wbsApvJOoCEeXPXf04XaZRM2X-dWKRaxACK4B/s1600/kayan-arkaplan.gif") repeat-x top left; border: 1px solid #bababa;}
.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:30px;display:inline-block;height:55px;line-height:55px;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:#333}
.ticker .recent-title a:hover{color:#000}
.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><div class="recent-thumb"><a class="tr-img" href="'+u+'" style="background:url('+k+') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><h3 class="recent-title"><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><div class="recent-thumb"><a class="tr-img" href="'+u+'" style="background:url('+k+') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><h3 class="recent-title"><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>


Örnek Görünüm