7 Handpicked Breaking News Ticker Widget For Blogger
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
2. Left to Right News Ticker
3. News Ticker With Author Name
4. Simple News Ticker
5. News Ticker With Thumbnail
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/AVvXsEjP8RabRausIBzT_YWLGhv6izKgdSDePG3gJdFslgvhdvOxhKeSINo53bwIjv3cF4P-Djkbxw50_6hz81p4Qb4PtJUuvFGW3gUh5U3o-jf73dqvhfphYg6wzoRCV9JYzEvpjTN-un_2TVRx/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/AVvXsEgY7OM1QMvixAd030y-zTCHZ43BAEJFIX85sgQyfrYabOVIyQRpUiSaaFCMMwPxl9xUSl2GYVpnQOm32mu_hG_DAK8K0BG3OE1g_4A45NPxVL7Fj1bi67yNX0ykYeX1QgG52e6DcVS2b_E/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/AVvXsEgY7OM1QMvixAd030y-zTCHZ43BAEJFIX85sgQyfrYabOVIyQRpUiSaaFCMMwPxl9xUSl2GYVpnQOm32mu_hG_DAK8K0BG3OE1g_4A45NPxVL7Fj1bi67yNX0ykYeX1QgG52e6DcVS2b_E/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'> </span><span class='tickeroverlay-right'> </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 != ""'>
<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
7. Headline News Ticker Widget
How to Install Headline News Ticker Widget
- Go to your Blogger Dashboard > Theme > Edit HTML
- Click anywhere inside the theme editor and press Ctrl + F
- Search <head> tag and paste the given code right below the the <head> tag
- 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
<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'/>
<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/AVvXsEh5ScYKbp46nDDkXgpfq-OLceQwUD1BMK5WpmwHe9RQOt63UClKjo09HKfnaQefHnAQk_TRd7EKZo-oA4VIq42xn2QTZAsYSL5jumQbi1tGcjTUpFGby1OqM1PR8ANVqdszn8svKi5XBJo/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.
0 Response to "7 Handpicked Breaking News Ticker Widget For Blogger"
Posting Komentar