Make Blogger newstiker setup easy best tricks | online web

   Blogger newstiker setup easy | online web

How to install NewsTicker widget on Blogger template

 

How to install NewsTicker widget on Blogger template

These are the friends! Hope you are doing well. If you want to know how to install NewsTicker widget on Blogger. So this time Aviraj will share the tips to install a newsticker widget on Blogger.

The main function of this widget is to display a list of recent articles, including animated slides, which is similar to the recent post widget, but only appears in the form of the post title.

All right, go ahead. Below are the steps on how to install NewsTicker Widget on Blogger.

How to install NewsTicker Widget on Blogger

• The first open Blogger dashboard
• Click Theme List
• Click the Edit HTML button
• Search tags
• Then add this CSS code first

<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

<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 with the number of posts you want to display.

 

OK, then add the code below freely until it's still in the body And Tag like 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>  

Then click the Save Theme button and install the NewsTicker widget on your Blogger site.

Guide video in Hindi:

How to install NewsTicker Widget with Blogger theme in Hindi

See results on your blog.

Conclusion:

Now you have learned how to install NewsTicker widget on Blogger template. If you have any doubts about Blogger, you can ask me in the comments section or join us Telegram Channel