Responsive News ticker widget for blogger
close
Responsive News ticker widget for blogger

Responsive News ticker widget for blogger

Responsive News ticker widget for blogger

If you are familiar with news ticker and have seen any website or on any blog then you will have noticed that news ticker attracts visitors on any website.

It forces your users to read up the titles of most recently published posts of your website.

And in this article I am going to share with you responsive news ticker widget for blogger.
This news ticker widget for blogger is responsive as you can understand it by its name.

This news ticker widget for blogger only show titles of your recent posts from your blogger blog using blogger JSON feed API.

The best place to add this responsive news ticker widget into your blogger blog is the header of your blogger blog.

So if you want to add this blogger widget or a responsive news ticker widget in blogger blog you have to follow some guidelines which are provided below.

Steps to Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Choose header section of your blogger template in layout section and click add gadget button there.
  5. Now Choose HTML/Javascript Widget from widgets list
  6. Now copy the source code provided below and paste it as a widget/gadget content.
  7. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
    <style>
    #breakingwrapper{background:#333;color:#fff;display:block;margin:0 20px 20px 20px;overflow:hidden}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:36px;height:36px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{color:#fff;display:block;padding:0 12.5px;font-size:13px;font-weight:normal;height:36px;line-height:36px;float:left;text-align:center;border-right:1px solid rgba(255,255,255,0.1)}#recentbreaking{float:left;margin:0 0 0 15px;font-size:13px;color:#fff}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#fff;text-decoration: none;transition: all .3s}#recentbreaking li a:hover{color:rgba(255,255,255,.7)}.blog-date{display:inline-block;float:right;margin:0 15px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#breakingnews .tulisbreaking i{margin:0 5px 0 0;font-family:fontawesome;color:#fff}
    @media only screen and (max-width:768px){
    #breakingwrapper{margin: 0 0 20px 0}#breakingnews{padding:0 10px 0 0}#recentbreaking{text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking i{margin:0}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}}
    </style>
    <div id='breakingwrapper'>
    <div id='breakingnews'>
    <span class='tulisbreaking'><i class='fa fa-circle-o-notch fa-spin fa-fw'></i><span class='breakhidden'></span></span>
    <div id='recentbreaking'>Fetching data...</div>
    <div class='blog-date'>
    <script language='Javascript'>
                var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
                var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
                var now = new Date();
                document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
             </script>
    </div>
    </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script>
    //<![CDATA[
    $(document).ready(function(){var e="https://www.softwebtuts.com",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
    //]]>
    </script>
  8. Save Theme/Template

In the above code fontawesome and jquery libraries are used because i have included some icons and jquery code to make this widget work. If these libraries are already used or are added in your blogger blog code then you don't need to include these one.

Customization:

As usual the customization in the above code is just you have to replace the URL with your website URL or leave it blank to auto detect it.

So I hope that this responsive news ticker widget for blogger would be very much helpful for you if you want to see the live demo or live preview of this responsive news ticker blogger widget you can simply go to the demo page by clicking the demo button below.

View Demo

Conclusion:

So I hope that you will like this responsive news ticker widget for blogger and if you did share it with your friends who are blogger user.

I hope that It helped you a lot and make sure to subscribe to the newsletters and stay updated of all upcoming articles on this blog.

One main benefit of subscribing to the newsletters of this blog is you will get notifications and this blog will help you to become blogger expert and a very best web designer.
Disqus Codes

No comments

Comments System WIDGET PACK

Notifications

Disqus Logo