Home
Blogger Tips

How to Install Newsticker Widget on Blogger Template

How to Install Newsticker Widget on Blogger Template

How to Install Newsticker Widget on Blogger Template
How to Install Newsticker Widget on Blogger Template


How to Install Newsticker Widget on Blogger Template


Hey Guys! I hope you are doing well. If you want to know that How to Install Newsticker Widget on Blogger. So this time Aviraz will share tips on How to Install a Newsticker Widget on Blogger.

The main function of its widget is to display a list of some of the latest articles with animated slides, almost the same as the recent post widget, but which is displayed only in the form of the post title.

Okay, go ahead. The following are the steps on How to Install a Newsticker Widgets on Blogger.

How to Install Newsticker Widget on Blogger

  • First open Blogger Dashboard
  • Click on Theme Menu
  • Click on the Edit HTML Button
  • Search </head> tag
  • Then add this CSS code before </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

Next, add the code below just before </body>



<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.akhelppoint.in",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;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><i class="fa fa-check-square"></i><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>


Replace the code marked with your blog URL and replace the number 10 according to the number of posts you want to Display.

Well, then add the code below freely anywhere as long as it's still in the body between <body> and </body> tag as in the previous post.




<div class="container">
  <div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update</span>
      <div id='recentbreaking'>Loading...</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>
</div>


After that click the Save Theme Button and Installed Newsticker Widget on Your Blogger Site.

Guide Video in Hindi: 

How to Install Newsticker Widget on Blogger Theme in Hindi




Please see the results on your blog.

Conclusion:

Now you have learned how to install Newsticker Widget on blogger template. If you have any doubt regarding Blogger, you can ask me in the comment section or join our Telegram Channel