In one of our past tutorial, we showed you How to Add AutoPlay Background Music to Blogger. But today we are going to share an amazing widget called Headline News Ticker. Breaking news ticker or Headline news ticker is designed to show the all latest posts in horizontally text scrolling style. You can change the numerical characters to increase or decrease the number of posts to be shown. Breaking news ticker usually displays the recent posts which float from left to right, right to left or from down to upside. Some widgets have more features like pause, left and right buttons. You can control the news ticker posts just like we control the songs in media player. The breaking news ticker displays the latest posts dynamically with the help of Jquery and CSS3.

In this post, you will find some news ticker widgets that show the recent posts with date, time and thumbnail which gives them a professional and amazing look. When your readers come to your website, they often look for your recently published posts that's what breaking news ticker fulfill their needs without letting them search here and there. Automated recent posts can be very useful to engage your readers on your website. So waiting for what? Are you wondering about mobile friendliness? Breaking headline ticker is 100% responsive as it works nicely on every device and web browser like IE, Chrome, Safari, Firefox, Opera, UC Browser and much more.

Recommended: Trending Post Widget for Blogger

1. Up and Down News Ticker

Breaking News ticker

2. Left to Right News Ticker

Breaking News Widget

3. News Ticker With Author Name

Blogger Breaking News Ticker

4. Simple News Ticker

Blogger breaking news widget

5. News Ticker With Thumbnail

hot news ticker widget
CSS
.ty-ran-yard a.ran-sym:hover{background-color:#6d6d6d}.ty-ran-yard a.ran-sym:before{color:#fff;content:'\f074';font-family:FontAwesome;font-size:16px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:50px}.news-tick-bar{margin:10px 0 0;width:auto}.ticker .title{float:left;height:40px;font-size:15px;color:#fff;line-height:40px;font-weight:400;overflow:hidden;padding:0 10px;background:$maincolor;font-family:Bungee inline}.ticker .title .fa{margin-right:10px;background:#fff;padding:5px 6px;border-radius:100%;color:$maincolor}.ticker .widget-content{height:40px;box-sizing:border-box;overflow:hidden;padding:0 4px;border:1px solid rgba(14, 185, 117, 0.22)}.ticker .widget-content li{float:left;margin-left:30px;display:inline-block;height:38px;line-height:38px;padding:0}.ticker .widget{height:40px;overflow:hidden;background-color:#f7f7f7}.tk-thumb{float:left;margin:4px 10px 0 0}.tk-img{position:relative;display:block;width:35px;height:30px;overflow:hidden}.ticker .post-tag{display:inline-block;background-color:$maincolor;color:#fff;margin-right:10px;font-weight:400;border-radius:2px;height:18px;line-height:18px;padding:0 6px;font-size:10px;text-transform:uppercase;position:relative;margin-top:10px;float:left}.ticker .tyard-title{font-size:14px;font-weight:400;display:inline-block}.ticker .tyard-title a{color:$darkcolor}.ticker .tyard-title a:hover{color:$maincolor}.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}.sidebar .widget{margin-bottom:20px;position:relative}.sidebar h2{position:relative;overflow:hidden;margin:0;font-size:18px;vertical-align:middle;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,.1);font-weight:700}.sidebar h2:after{content:'';display:inline-block;position:absolute;height:15px;top:0;margin:3px 0 12px 10px;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCT-FfU5J1e2yyGERlXYR81ZbjuQbzCz6P2aJ-HJuxhLiF7pY-seDhYDduOTf4ChviHAJkU9dsLb4QoyGGgRqACu23IDvY8YrHRDNzD8bff1AGJcPivM_rpl39AkTNhon0HlogfN4fYGM/s1600/repeat-bg.png)repeat}.sidebar ul,.sidebar li{list-style-type:none;margin:0;padding:0}.sidebar .widget-content{padding:10px 0}.menu-tab li a,.sidetabs .section{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease;-ms-transition:all 0s ease}.menu-tab{display:flex;clear:both;padding:0;margin:0}.sidetabs .widget h2{display:none}.menu-tab li{width:33.3%;float:left;display:inline-block;padding:0;position:relative}.menu-tab li.active:after{content:"";border-top:10px solid $maincolor;border-left:10px solid transparent;border-right:10px solid transparent;position:absolute;bottom:-8px;left:14px}.menu-tab li a{font-family:Ruda;height:32px;text-align:center;padding:0;font-weight:400;display:block;color:#fff;background-color:$darkcolor;font-size:14px;line-height:32px;letter-spacing:1.5px;text-transform:uppercase}.menu-tab li.active a{color:#fff;background-color:$maincolor}.menu-tab li{display:none}.hide-tab{display:inline-block !important}#tabside3{margin-bottom:15px}.sidetabs .widget-content{padding:15px 0 0}.tyard-wrapper{margin:0 0 10px}.preload{opacity:0}.comload{opacity:1}.tyard .ty-first{width:60%;position:relative;float:left;padding-right:1.4%;box-sizing:border-box;overflow:hidden}.tyard .ty-feat-image{width:100%;position:relative;overflow:hidden}.tyard .ty-first .tyard-thumb,.tyard .ty-img{height:300px}.templatesyard .ty-first .tyard-thumb{position:relative;width:100%;height:200px}.tyard-thumb{overflow:hidden}.tyard .ty-first .tyard-thumb,.tyard .ty-img{height:300px !important}.templatesyard .ty-img{width:100%;height:200px;position:relative;display:block}.ty-first .ty-img:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:151px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJVCv0fxgE69z6YPIqK_CT1hP0-JZOTTEKZrT3MUO-ufzsZmopiMdWKGaF9Lq6J_gU2eozcSVDtADFZpJ9jhAiF4rUSMRfEAPyZP84Kh4yAQ_QzzpbGJDOueR-9tYwjjs9HReVAHYJR6w/s1600-r/metabg.png) repeat-x;opacity:.8}.templatesyard .ty-feat .ty-rest .yard-img:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:110px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJVCv0fxgE69z6YPIqK_CT1hP0-JZOTTEKZrT3MUO-ufzsZmopiMdWKGaF9Lq6J_gU2eozcSVDtADFZpJ9jhAiF4rUSMRfEAPyZP84Kh4yAQ_QzzpbGJDOueR-9tYwjjs9HReVAHYJR6w/s1600-r/metabg.png) repeat-x;opacity:.8}.ty-first .tyard-thumb .yard-label{position:absolute;top:15px;left:15px;z-index:2}.ty-first .tyard-thumb .yard-label a{background:$maincolor;color:#fff;text-transform:uppercase;height:20px;line-height:20px;display:inline-block;padding:0 6px;font-size:11px;font-weight:400;border-radius:2px}.tyard .ty-first .ty-con-yard,.column .ty-first .ty-con-yard{position:absolute;bottom:0;width:100%;z-index:2;padding:15px;box-sizing:border-box}.tyard .ty-first .ty-con-yard .tyard-title a,.column .ty-first .ty-con-yard .tyard-title a{display:block;font-size:19px;color:#fff;font-weight:400;line-height:1.4em;margin-bottom:5px}.ty-con-yard .yard-auth-ty,.ty-con-yard .ty-time{color:#ccc}.recent-summary{display:block;color:#ccc;padding:10px 0}.tyard .ty-feat .ty-rest{overflow:hidden;display:block;padding:0;position:relative}.tyard .ty-feat .ty-rest:last-child{padding-top:10px;margin-top:10px}.templatesyard .ty-feat .ty-rest .tyard-thumb{width:100%;height:140px;vertical-align:middle}.templatesyard .ty-feat .ty-rest .yard-img{width:100%;height:140px;position:relative;display:block}.tyimg-lay{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background-color:rgba(40,35,40,0.05)}.templatesyard .ty-feat .ty-rest .yard-tent-ty{position:absolute;bottom:0;width:100%;z-index:2;padding:15px;box-sizing:border-box}.tyard .ty-rest .yard-tent-ty .tyard-title{overflow:hidden;line-height:0;margin:0 0 2px;padding:0}.tyard .ty-rest .yard-tent-ty .tyard-title a{color:#fff;font-weight:400;font-size:13px;line-height:1.5em}.breadcrumbs .fa-times:before{margin:0 5px}.breadcrumbs{margin:0;font-size:13px;padding:0}.breadcrumbs i{color:$maincolor;font-size:8px !important}.breadcrumbs span a.bhome{color:$maincolor}.breadcrumbs span,.breadcrumbs span a{color:#000}.breadcrumbs span a:hover{color:$maincolor}article{padding:0;overflow:hidden}.post-outer{padding:0 0 20px 0}.post{display:block;overflow:hidden;word-wrap:break-word;background:#ffffff}.item .post-head{position:relative;margin:10px 0;border-bottom:2px solid #eee}.post-head h1{color:#000;font-size:32px;font-weight:400;line-height:44px;border-bottom:2px solid #555;display:inline-block;position:relative;top:2px}.post h2{margin-bottom:12px;line-height:37px;font-size:22px;font-weight:700}.post h2 a{color:#000;letter-spacing:1px}.post h2{margin:0 0 10px;padding:0}.retitle h2{margin:8px 0;display:block}.post-body{margin:0px;padding:10px;font-size:14px;line-height:26px;box-sizing:border-box}.post-home-image{float:left;width:270px;height:182px;margin-right:20px;position:relative}.post-home-image .post-thumb{width:100%;height:182px;position:relative;display:block;overflow:hidden}.post-home-image .post-thumb a{width:100%;height:182px;display:block;transition:all .3s ease-out !important;-webkit-transition:all .3s ease-out !important;-moz-transition:all .3s ease-out !important;-o-transition:all .3s ease-out !important}.index .post-labels,.archive .post-labels{position:absolute;top:10px;left:10px;padding:8px 12px 6px;background:$maincolor;color:#fff;font-size:12px;text-transform:uppercase;display:inline-block;z-index:9}.index .post-labels a,.archive .post-labels a{color:#fff}.date-header{color:#bdbdbd;display:block;font-size:12px;font-weight:400;line-height:1.3em;margin:0 !important;padding:0}.date-header a{color:#bdbdbd}.date-header .read-more{background:$darkcolor;padding:5px 12px !important;display:inline-block;vertical-align:middle;margin:10px 0 0;font-size:12px;text-transform:capitalize;border-radius:2px;color:#f7f7f7;font-weight:bold;white-space:nowrap;font-family:Ruda}.read-more:hover{background:$maincolor;color:#fff}.post-header{padding:10px;margin-bottom:10px}#meta-post{border-top:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;padding:5px 0}.post-meta{color:#bdbdbd;display:block;font-size:13px;font-weight:400;line-height:21px;margin:0;padding:0}.post-meta a,.post-meta i{color:#CBCBCB}.post-timestamp{margin-left:5px}.resumo{margin-top:10px;color:#919191}.resumo span{display:block;font-size:15px;line-height:25px;text-align:justify}.post-body img{max-width:100%;padding:10px 0;position:relative;margin:0 auto}.post h3{font-size:18px;margin-top:20px;margin-bottom:10px;line-height:1.1}.second-meta{display:none}.comment-link{white-space:normal}#blog-pager{clear:both;text-align:center;padding:15px 0;background:#ffffff;color:#4d4d4d}.displaypageNum a,.showpage a,.pagecurrent,.blog-pager-older-link,.blog-pager-newer-link{padding:5px 13px;margin-right:8px;color:#fff;background-color:$darkcolor;border:1px solid #2d2d2d;display:inline-block;line-height:20px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;margin-top:10px}.displaypageNum a:hover,.showpage a:hover,.pagecurrent,.blog-pager-older-link:hover,.blog-pager-newer-link:hover{background:$maincolor;border:1px solid #1bcdda;text-decoration:none;color:#fff}.showpageOf{display:none !important;overflow:hidden}#blog-pager .pages{margin:10px 0;border:none}.item .post-footer .label-head .label-title{color:#fff;padding:3px 8px;font-size:13px;background-color:$maincolor}.item .post-footer .label-head a{color:#fff;padding:3px 8px;font-size:13px;background-color:$darkcolor}.ty-post-share{margin:10px 0 0;font-size:12px;padding:0}.ty-post-share ul{padding:0;overflow:hidden;list-style:none}.ty-post-share li{display:block;float:left;width:25%;text-align:center}.ty-post-share li.ty-twitter a{background:#4b96d7}.ty-post-share li.ty-facebook a{background:#2a3e8c}.ty-post-share li.ty-pinterest a{background:#ae0000}.ty-post-share a{display:block;width:100%;font-size:12px;padding:1em;color:#fff;background:#000;font-weight:bold;text-transform:uppercase;letter-spacing:1px}.ty-post-share a .fa{font-size:18px;margin-right:15px}.ty-author-box{border:1px solid #f2f2f2;background:#f8f8f8;overflow:hidden;padding:10px;margin:10px 0}.ty-author-box img{float:left;margin-right:10px;object-fit:cover}.ty-author-box p{padding:0;-webkit-margin-before:0;-webkit-margin-after:0}.ty-author-box b{font-family:Ruda;font-weight:700;font-style:normal;letter-spacing:1px;font-size:20px}.ty-author-box ul{overflow:hidden;padding:0;margin:6px}.ty-author-box ul li:first-child{margin-left:0}.ty-author-box ul li{float:left;margin-left:7px;text-align:center;font-size:.875rem;border-radius:3px;list-style-type:none;padding:0}.ty-author-box ul li a{display:block;padding:8px 10px;background:#eee}.ty-author-box ul li a:hover{background:$maincolor;color:#fff}#related-posts{margin-bottom:10px}#related-posts .related-text{display:none}.related li{width:32%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;margin:0 0 0 2%;padding:0}.related li:first-child,.related li:nth-child(4){margin-left:0}.related li h3{margin-top:0}.related-thumb{width:100%;height:120px;overflow:hidden;border-radius:2px}.related li .related-img{width:100%;height:120px;display:block;transition:all .3s ease-out !important;-webkit-transition:all .3s ease-out !important;-moz-transition:all .3s ease-out !important;-o-transition:all .3s ease-out !important}.related li .related-img:hover{-webkit-transform:scale(1.1) rotate(-1.5deg) !important;-moz-transform:scale(1.1) rotate(-1.5deg) !important;transform:scale(1.1) rotate(-1.5deg) !important;transition:all;.ty-ran-yard{position:absolute;right:0;top:0;z-index:99}.ty-ran-yard span{list-style:none}.ty-ran-yard a.ran-sym{background-color:$maincolor;cursor:pointer;display:block;height:50px;text-align:center;position:relative;right:0;top:0;width:50px;border-radius:0;box-sizing:border-box}.ty-ran-yard a.ran-sym:hover{background-color:#6d6d6d}.ty-ran-yard a.ran-sym:before{color:#fff;content:'\f074';font-family:FontAwesome;font-size:16px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:50px}.news-tick-bar{margin:10px 0 0;width:auto}.ticker .title{float:left;height:40px;font-size:15px;color:#fff;line-height:40px;font-weight:400;overflow:hidden;padding:0 10px;background:$maincolor;font-family:Bungee inline}.ticker .title .fa{margin-right:10px;background:#fff;padding:5px 6px;}
Jquery
<script async='async' type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(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);
// Main Post Scripts
$(".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!=undefined&&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="tk-thumb"><a class="tk-img" href="'+u+'" style="background:url('+k+') no-repeat center center;background-size: cover"><span class="tyimg-lay"/></a></div><a href="/search/label/'+s+'" class="post-tag icon '+s+'">'+s+'</a><h3 class="tyard-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-fire"></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="tk-thumb"><a class="tk-img" href="'+u+'" style="background:url('+k+') no-repeat center center;background-size: cover"><span class="tyimg-lay"/></a></div><a href="/search/label/'+s+'" class="post-tag icon '+s+'">'+s+'</a><h3 class="tyard-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-fire"></i>');$(this).find('ul').webTicker()})}})}});
//]]>
</script>
Markup: HTML
<div class='ty-ran-yard'><span><a class='ran-sym'/></span></div>
<div class='body-row' style='margin:0 auto;'>
<div class='news-tick-bar'>
 <b:section class='ticker' id='ticker' maxwidgets='1' name='Ticker News' showaddelement='yes'>
   <b:widget id='HTML3' locked='false' title='Hot' type='HTML' version='1'>
     <b:widget-settings>
       <b:widget-setting name='content'><![CDATA[<span data-type="label" data-label="SEO" data-no="5"></span>]]></b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
 <!--<b:include name='quickedit'/>-->
</b:includable>
   </b:widget>
 </b:section>
    </div>
  </div>
<div style='clear: both;'/>

6. 3D News Ticker

7. Headline News Ticker Widget

Headline news ticker

How to Install Headline News Ticker Widget

  • Go to your Blogger Dashboard > Theme > Edit HTML
  • Click anywhere inside the theme editor and press C + F
  • Search <head> tag and paste the given code right below the the <head> tag
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>        
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.com/BreakingNewsTicker.css' rel='stylesheet' type='text/css'/>
  • After finishing the above steps hit Save Theme
  • Now go to the Layout > Add a Gadget > HTML/JavaScript
  • Paste the following code and hit Save
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>        
    <script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>      
    <script type="text/javascript">        
    //----------------------------Defaults        
    var ListBlogLink = "http://www.knigulper.com";        
    var ListCount = 5;        
    var TitleCount = 70;        
    var ListLabel ="Widgets";        
    var ChrCount = 140;        
    var ImageSize = 200;
         
    //----------------------------Function Start        
    function mbtlist(json) {        
    document.write('<ul id="js-news" class="js-hidden">');        
    for (var i = 0; i < ListCount; i++)        
    {
         
    //-----------------------------Variables Declared        
    var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";        
    //----------------------------- Title URL        
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {        
    if (json.feed.entry[i].link[j].rel == 'alternate') {        
    break;        
    }        
    }        
    ListUrl= "'" + json.feed.entry[i].link[j].href + "'";        
    //----------------------------------- Title Stirng        
    if (json.feed.entry[i].title!= null)        
    {        
    ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);        
    }
         
    if (json.feed.entry[i].thr$total)        
    {        
    ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";        
    }        
    ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");        
    ListAuthor=ListAuthor.slice(0, 1).join(" ");        
    AuthorPic = json.feed.entry[i].author[0].gd$image.src;
         
           
    //################### Content Check        
    ListConten = json.feed.entry[i].content.$t;        
    ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
         
    //################### Date Format
         
    ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
         
    ListDate= json.feed.entry[i].published.$t.substring(0,10);
         
                             Y = ListDate.substring(0, 4);        
                            m = ListDate.substring(5, 7);        
                             D = ListDate.substring(8, 10);        
                             M = ListMonth[parseInt(m - 1)];
         
    //################### Thumbnail Check        
    if (json.feed.entry[i].media$thumbnail)        
    {        
    thumbUrl = json.feed.entry[i].media$thumbnail.url;        
    sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");        
    ListImage= "'" + sk.replace("?imgmax=800","") + "'";        
    }
         
    // YouTube scan        
    else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)        
    {        
        var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();        
     
        if (youtube_id.length == 11) {        
            var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";        
            }        
    }
         
           
    else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)        
    {        
    // Support For 3rd Party Images        
    ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];        
    }        
    else        
    {        
    ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfl895aUrtUAd8Ymd79KvzdS-e2DNF24ZdULPYVivrhMC0l8B4pWajcZ-KRPXW15yFdcPwFzH8MqkE03TRWbR0rmMxZIYbwwt6tyUWxsFSrz0wHpCShf1mvhcTWaxio9a4pGJ1K_IHNs/s200/Icon.png'";        
    }
         
    //----------------------------------- Printing List        
    var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"        
    +ListAuthor+ "</span> <span class='icomments'>"        
    +ListComments + "</span>  <span class='idate'>"        
    + D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle tooltip' href="        
    +ListUrl+        
    "><span><b></b><img src="        
    +ListImage+        
    "/>"        
    +ListContent+        
    " →</span>"+ListTitle+"</a></li>";        
    document.write(listing);        
    }}
         
    document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");        
    /*##########Newsticker settings########*/        
        $(function () {        
            $('#js-news').ticker({        
            speed: 0.20,        
            controls: true,
            titleText: 'Headlines',        
            displayType: 'reveal',        
            pauseOnItems: 2000});        
    });        
    </script>
    Customization
    Replace the blue text with your desired numbers and letters before saving it. If you don't want to mess with it, then just replace the www.knigulper.com with your own blog URL and leave the rest codes untouched.

    2 Komentar

    1. i want to embed the code on my blog through the theme editor, not by adding any gadget. it displays xml error on
      //----------------------------Function Start
      for loop code
      what the way out

      BalasHapus
    2. Usually I never comment on blogs but your article is so convincing that I never stop myself
      to say something about it. i am Really very happy to say that this post is very interesting
      to read and keep it up bro. GXSS1B VER3.1 & GXSS1B VER3.0 SCAM+ ONE YEAR FREE SERVER NEW SOFTWARE

      BalasHapus

    Posting Komentar