How To Add New 2016 Breaking News Widget In Blogger

In previous post we have talked about Adding Responsive Breaking News Widget and Stylish Trending Now Gadget In Blogger Template.Once again today in this article we are going to explain How to Create 2016 Thumbnail Breaking News plugin inside blogger template.In this gadget tool you can display latest/recent article updates from your blogger website or blog.New posts updates will slide smoothly to upside with the thumbnail of the article and also includes author name with the publish date beside the author name.New Breaking news widget 2016 will surely going to suits your website design/niche.You can change the color of the gadget.We have used CSS for styling the trending now gadget and java script too.In order to get breaking news widget below the menu bar follow the steps mentioned below.

DEMO

See the Pen New 2016 Breaking News Ticker For Blogger Template by BloggersStand (@bloggersstand) on CodePen.

How to Add New 2016 Breaking News Widget inside blogger template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on  Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

 
/* CSS Breaking News Ticker */
.bsd-ticker{display:block;text-align:center;margin:0 20px 20px 20px;padding:3px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #415471}
.bsd-ticker>span{display:inline-block;background:#415471;padding:0;font:700 12px 'roboto',sans-serif}
.bsd-ticker>span>a{color:#222;text-decoration:none}
#ticker{height:46px;overflow:hidden;background:#ffffff;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:46px;white-space:nowrap}
#ticker ul li img{float:left;width:36px;height:36px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#666;text-decoration:none;line-height:26px!important}
#ticker ul li .authorticker{font:400 12px 'roboto',sans-serif;line-height:21px!important;color:#666}

Step 5. Now Search for the closing tab </body> and add the below java script just above/before the </body> tag. 

<script type='text/javascript'>
//<![CDATA[
// 2016 Breaking News ticker by http://www.bloggersstand.com
function getauthorundefinedt){forundefinedvar e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmetaundefinedt){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substringundefined0,4),a=t.substringundefined5,7),n=t.substringundefined8,10),r=e[parseIntundefineda,10)]+" "+n+" "+i;return r}function bloggersstandtickerundefinedt){var e=document.querySelectorundefined"#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";ifundefinedi){forundefinedvar n=0;n<i.length;n++){forundefinedvar r=i[n],s=0;s<r.link.length;s++)ifundefined"alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catchundefinedt){var o=""}var u=r.title.$t,c=getauthorundefinedr.author),d=getmetaundefinedr.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="authorticker"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$undefined"#ticker").bsdtickerundefined)}!functionundefinedt){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:functionundefinedt,e){i.animateundefinedt,e,"up")},moveDown:functionundefinedt,e){i.animateundefinedt,e,"down")},animate:functionundefinede,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.childrenundefined"ul"),o="up"===a?"li:first":"li:last";s.triggerundefined"bsdticker.beforeTick");var u=l.childrenundefinedo).cloneundefined!0);ifundefined0<r.height&&undefinedn=l.childrenundefined"li:first").heightundefined)),n+=r.margin+2*r.padding,"down"===a&&l.cssundefined"top","-"+n+"px").prependundefinedu),i&&i.animate){ifundefinede.animating)return;e.animating=!0,l.animateundefined"up"===a?{top:"-="+n+"px"}:{top:0},r.speed,functionundefined){tundefinedl).childrenundefinedo).removeundefined),tundefinedl).cssundefined"top","0px"),e.animating=!1,s.triggerundefined"bsdticker.afterTick")})}else l.childrenundefinedo).removeundefined),l.cssundefined"top","0px"),s.triggerundefined"bsdticker.afterTick");"up"===a&&u.appendToundefinedl)},nextUsePause:functionundefined){var e=tundefinedthis).dataundefined"state"),i=e.options;e.isPaused||2>e.itemCount||a.next.callundefinedthis,{animate:i.animate})},startInterval:functionundefined){var e=tundefinedthis).dataundefined"state"),a=this;e.intervalId=setIntervalundefinedfunctionundefined){i.nextUsePause.callundefineda)},e.options.pause)},stopInterval:functionundefined){var e=tundefinedthis).dataundefined"state");e&&undefinede.intervalId&&clearIntervalundefinede.intervalId),e.intervalId=void 0)},restartInterval:functionundefined){i.stopInterval.callundefinedthis),i.startInterval.callundefinedthis)}},a={init:functionundefinedn){a.stop.callundefinedthis);var r=jQuery.extendundefined{},e);n=t.extendundefinedr,n);var r=tundefinedthis),s={itemCount:r.childrenundefined"ul").childrenundefined"li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};tundefinedthis).dataundefined"state",s),r.cssundefined{overflow:"hidden",position:"relative"}).childrenundefined"ul").cssundefined{position:"absolute",margin:0,padding:0}).childrenundefined"li").cssundefined{margin:n.margin,padding:n.padding}),isNaNundefinedn.height)||0===n.height?undefinedr.childrenundefined"ul").childrenundefined"li").eachundefinedfunctionundefined){var e=tundefinedthis);e.heightundefined)>s.itemHeight&&undefineds.itemHeight=e.heightundefined))}),r.childrenundefined"ul").childrenundefined"li").eachundefinedfunctionundefined){tundefinedthis).heightundefineds.itemHeight)}),r.heightundefinedundefineds.itemHeight+undefinedn.margin+2*n.padding))*n.showItems+n.margin)):r.heightundefinedn.height);var l=this;n.startPaused||i.startInterval.callundefinedl),n.mousePause&&r.bindundefined"mouseenter",functionundefined){!0!==s.isPaused&&undefineds.pausedByCode=!0,i.stopInterval.callundefinedl),a.pause.callundefinedl,!0))}).bindundefined"mouseleave",functionundefined){undefined!0!==s.isPaused||s.pausedByCode)&&undefineds.pausedByCode=!1,a.pause.callundefinedl,!1),i.startInterval.callundefinedl))})},pause:functionundefinede){var i=tundefinedthis).dataundefined"state");ifundefinedi){ifundefined2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?undefinedtundefinedthis).addClassundefined"paused"),i.triggerundefined"bsdticker.pause")):undefinedtundefinedthis).removeClassundefined"paused"),i.triggerundefined"bsdticker.resume"))}},next:functionundefinede){var a=tundefinedthis).dataundefined"state");ifundefineda){ifundefineda.animating||2>a.itemCount)return!1;i.restartInterval.callundefinedthis),i.moveUpundefineda,e)}},prev:functionundefinede){var a=tundefinedthis).dataundefined"state");ifundefineda){ifundefineda.animating||2>a.itemCount)return!1;i.restartInterval.callundefinedthis),i.moveDownundefineda,e)}},stop:functionundefined){tundefinedthis).dataundefined"state")&&i.stopInterval.callundefinedthis)},remove:functionundefined){var e=tundefinedthis).dataundefined"state");e&&undefinedi.stopInterval.callundefinedthis),e=e.element,e.unbindundefined),e.removeundefined))}};t.fn.bsdticker=functionundefinede){return a[e]?a[e].applyundefinedthis,Array.prototype.slice.callundefinedarguments,1)):"object"!=typeof e&&e?void t.errorundefined"Method "+e+" does not exist on jQuery.bsdticker"):a.init.applyundefinedthis,arguments)}}undefinedjQuery),$undefinedfunctionundefined){var t=document.createElementundefined"script");t.src="http://"+$undefined".bsd-ticker").dataundefined"domain")+"/feeds/posts/summary?alt=json&callback=bloggersstandticker",t.type="text/javascript",document.getElementsByTagNameundefined"body")[0].appendChildundefinedt)});
//]]>
</script>

Step 6. Now Add the following code between the <body> </body> tag.

<div class='bsd-ticker' data-domain='www.bloggersstand.com'>
<div id='ticker'>
</div>
</div>

Now Save your template Done..! 

Customization:

• Replace www.bloggersstand.com with your website url.