Elevate Your Blogger Site with Our News Ticker Widget!
Introducing our exquisite News Ticker Widget, meticulously designed to elevate the visual appeal of your Blogger site. This elegant feature seamlessly integrates into your blog, offering a sophisticated and dynamic way to present your latest updates. With a sleek and modern design, our News Ticker Widget ensures that your breaking news or latest posts are showcased prominently, catching the eyes of your audience.
The concept of the news ticker has evolved from online newspaper sites, originally designed for a quick overview of breaking news. What was once exclusively used on news platforms has now become a prominent feature in the blogging landscape, extending beyond news-focused blogs to include a variety of personal and professional niches. This represents a contemporary trend on the blogging platform.
Key Features:
- Sleek Design: Our News Ticker Widget boasts a sleek and modern design, ensuring that it complements the aesthetic of your blog seamlessly.
- Customizable Styles: Tailor the widget to match your blog's theme with customizable styles. Choose from a range of fonts, colors, and animation options to create a personalized look.
- User-Friendly Installation: Installing our News Ticker Widget is a breeze. No coding expertise required! Follow our simple step-by-step guide, and you'll have this eye-catching feature up and running in no time.
- Real-time Updates: Keep your audience informed with real-time updates. As you publish new posts, the News Ticker automatically reflects the latest content along with publishing dates.
- Responsive Design: Our widget is designed to adapt seamlessly to various screen sizes, ensuring an optimal viewing experience for your visitors, whether they're on desktop or mobile devices.
Elevate your blogging experience with our Beautiful News Ticker Widget. Enhance the aesthetics of your site while keeping your audience engaged with the latest happenings. Download and install now to take your Blogger site to the next level!
The integration of news tickers is notably observed in premium themes, where it has become an integral component of the overall design. Many developers and widget builders have crafted codes that not only function effectively but also present an aesthetically appealing outlook.
While news tickers were initially unavailable for Google Blogger, they have gained widespread popularity among users. Considering its significance, I recommend incorporating this widget into your blog, as it serves as an important tool to showcase your latest posts or news. By doing so, your blog becomes more user-friendly, providing visitors with a convenient way to stay updated on your content.
/* News Ticker by http://www.bloggerspice.com */
.BSNews {background:#eeeeee;width:100%;font-family:Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.4em;display:inline-block;margin-right:25px;margin-top:9px;}
.news {width:100%;margin:0 auto;padding:0 2px;line-height: 1.4em;text-align:left;font:normal 13px Arial;color:#000000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#333333;text-decoration:underline;}
Customization
- To change the background color of Latest News holder Box just change the #eeeeee code with different color. You can use Photoshop to generate color code or use our color picker.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<!-- News Ticker -->
<script src='http://www.google.com/jsapi?key=AIzaSyDsllMIq0A98LUp2DP5SKBbXfBdTq_lAFE'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
- In the above script I have added a JavaScript file and this is optional to add. If you have already included this code then don't add the bold code.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Step 7: Now find <div
id='content-wrapper'> or <div id='main-wrapper'>Or <div class='main-outer'> by pressing Ctrl+F (Windows) or CMD+F (Mac)
<div class='BSNews'>
<div class='news'>
<div style='float:left;padding:6px 10px 8px 4px;font:normal 100% Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;color:#FEFEFE;background-color:#000000;text-transform:none;'>
News Update : </div>
<div style='float:left;width:80%;padding:6px 4px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Blogger Spice", "http://bloggerspice.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'></div>
</div>
Customization
- To change the background color of Latest News Box just change the #000000 code with different color. You can use Photoshop to generate color code or use our color picker.
- Replace bloggerspice.com with your blog address.
I trust that you have seamlessly incorporated the Latest News widget into your blog. This straightforward ticker will automatically showcase the link to your most recent post along with its publishing date whenever you publish new content. While this serves as a fundamental and uncomplicated news ticker, I am optimistic about developing more advanced features for it in the near future.
If you encounter any challenges while installing this widget, please don't hesitate to reach out. Feel free to leave a comment below, and I'll be more than happy to assist you. Your feedback and engagement are highly valued, and I look forward to enhancing your experience with the evolving features of our news ticker.
76 comments
How can i change it Bro..
.BSNews1 {background:#eeeeee;width:100%;font-family:Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.4em;display:inline-block;margin-right:25px;margin-top:9px;}
.news1 {width:100%;margin:0 auto;padding:0 2px;line-height: 1.4em;text-align:left;font:normal 13px Arial;color:#000000;overflow:hidden;clear:both;}
.news1 a:link, .news a:visited{color:#000000;text-decoration:none;}
.news1 a:hover {color:#333333;text-decoration:underline;}
I hope it will work for you. Thanks
https://developers.google.com/feed/terms?hl=en#deprecation-policy
https://productforums.google.com/forum/#!msg/blogger/pHMsmoqLXpY/7nJ2-4JHDAAJ
how to enable like thumbnail style that codes,
example this site latest apps news ticker
http://www.karan.mobi/
;)
This is resent post..? . how can display one selected label to this widget
www.media1programs.com
http://bloggerspice.com/feeds/posts/default
now replace it with below code
http://bloggerspice.com/feeds/posts/default/-/Label_Name
now change the Label_Name with your Blog label. :up
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
let me know can you make it work or not?
At first i really want to thank you a lot for these codes its exactly what i am looking for
so THANKS for your job
i have A question how can i change the news update bar & the word(news update) from left to right ??
and how change the bar fonts for bold & to this color #00A8D8 ???
this is my blog (http://www.thenetworkch2pc.com.nu)
You are using RTL version of Blogger template. So you have to change all "Left" with "Right". Just locate the below code in News ticker widget script...
<div style='float:left;padding:6px 10px 8px 4px;font:normal 100% Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;color:#FEFEFE;background-color:#000000;text-transform:none;'>
News Update : </div>
<div style='float:left;width:80%;padding:6px 4px; position:relative; overflow:hidden;'>
After That............................................
change "News Update" text according to your own words.
Change background-color:#000000; with #00A8D8; color code.
Change float:left with float:right
I hope it will solve your problem. :wr
My blog: http://www.learnxlr.com
please locate the below code and replace 1005 with 960px.
.BSNews {background:#eeeeee;width:100%;
Again locate below text and change to "Updates"
News Update :
:sp
i just want to ask you how can i making column in the blogger hidden (ex:my blogger contain 2 columns that is had html codes inside it how can i make it hidden & do not appear for visitors just their action still) in the end of my blogger the code appear clearly
thanks a lot i really trust you because i previously Experimented your codes & it is amazing
so thank you
my blogger (http://thenetworkch2pc.blogspot.com)
you have added code like text. that's why it is appearing in your blog publicly. I think you have missed the whole advertisement script. Copy the script properly and add it in HTML widget. It won't be visible.
Have you replace "bloggerspice" with your Blog URL from the below line?
http://bloggerspice.com/feeds/posts/default
:t
and another thing if your template containing any updated or same JS file like below then remove one. Use only one JS file. I hope it will work now.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<div id='pagenbt'>
<div class='contentnbt'>
It will work now. Thanks :up
your code bro
use Ctrl+F in "Edit HTML" for searching the <div class='contentnbt'> code.
You will find it easily.
http://bloggingrtrick.blogspot.com/
Your new template's code is customized. So Please add the widget code above of below code line. It will work.
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
;)
https://bloggingtrick.blogspot.com
not working..
function a ki kono problem ace??
at first thanks a lot for your codes it is so benefit to my web
lately happened something wrong in these codes it was not publish any update in spite of i coustimized it
perfectly sine 4 months ago but now it is not work ???
p.s i had never changed anything or modified it !!!
(http://thenetworkch2pc.blogspot.com)
thanks
http://www.bloggerspice.com/2016/08/breaking-news-ticker-widget-for-blogger.html
is there a new updates for the news ticker html codes after google updates ??
thanks
http://www.bloggerspice.com/2016/08/breaking-news-ticker-widget-for-blogger.html
Thank you. :)