7 Handpicked Breaking News Ticker Widget For Blogger

min
() Words
Share
Share
Tweet
Share
Share
Share
Pin it

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.

Check out: 4 Killer Horizontal Email Subscribe Widget For BlogSpot

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.

Pay Attention: Trending Post Widget for Blogger

1. Up and Down News Ticker

Breaking News ticker: Up and Down News Ticker



Install

Click here

2. Left to Right News Ticker

Breaking News Widget



Install

Click here

3. News Ticker With Author Name

Blogger Breaking News Ticker



Install

Click here

4. Simple News Ticker

Blogger breaking news widget



Install

Click here

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(http://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/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(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/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(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/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. Marquee News Ticker



Install

Click here

7. Headline News Ticker Widget

Headline news ticker

How to Install Headline News Ticker Widget

  1. Go to your Blogger Dashboard > Theme > Edit HTML
  2. Click anywhere inside the theme editor and press Ctrl + F
  3. Search <head> tag and paste the given code right below the the <head> tag
  4. <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/www.knigulper.com/BreakingNewsTicker.css' rel='stylesheet' type='text/css'/>
  5. After finishing the above steps hit Save Theme
  6. Now go to the Layout > Add a Gadget > HTML/JavaScript
  7. 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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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.

Discover How to Gain Your Blog Traffic By 209%

Get Free Access

More From Knigulper

4 comments:

  1. Mytrickstips.tk5 August 2017 at 23:02

    NEED 5 NO TICKER HOW TO ISTALL

    ReplyDelete
    Replies
    1. Please install the code properly!

      Delete
  2. Brother i m new blogger but i dont know how to add html code in blogger post please tell me how to add thml code in blog post .... jo Post per apply na ho......????

    ReplyDelete
    Replies
    1. @Editing Lovers Login to your Blogger > Click Posts > New Post > Click HTML > Add your HTML code inside the Post Editor > Finally click Compose and hit Publish

      Delete