How To Add New 2016 Breaking News Widget In Blogger

0
add install new latest recent post auto scroll breaking trending now 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

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. 
learn trick to add breaking news ticker ,trending now widget in blogger template.Adding installing create auto recent posts updates scroll in bar latest article display in gadget plugin for blogspot theme.
In previous post we have talked about Adding Responsive Breaking News Widget and Stylish Trendi...
SUMMARY

learn trick to add breaking news ticker ,trending now widget in blogger template.Adding installing create auto recent posts updates scroll in bar latest article display in gadget plugin for blogspot theme.

You Might Also Like:

We hope this article helped you to learn How To Add New 2016 Breaking News Widget In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add New 2016 Breaking News Widget In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand