petrussiahaan.com - How to Install Newsticker Widget on Blog - If you have a blog on the Blogger platform and want to add a newsticker widget to display the latest news or important announcements, you can do so easily using a few simple steps.
The Newsticker widget will grab the attention of your visitors and give them quick access to the latest information. Here is a step by step guide on How to Install Newsticker Widget on Blog.
How to Install a Newsticker Widget on a Blog
First Add CSS
First open your Blogger Dashboard > Click the Theme menu and the Edit HTML button > 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 .writebreaking{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 .writebreaking .breakhidden,#breakingnews .writebreaking{display:none}#recentbreaking li a,#recentbreaking li a: hover{color:#fff}}
</style>Second Add Javascript
Next, add the code below just before </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.petrussiahaan.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><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's nothing here?</span>")},error:function(){ $("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>Change your blog address and then the number 10 according to the number of posts you want to display.
Third Add HTML
Now, then add the code below freely anywhere as long as it is inside the body between <body> and </body> as in the previous post.
<div id='breakingwrapper'>
<div id='breakingnews'>
<span class='writebreaking'>News Update<span class='breakhidden'/></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()] + "");
</scripts>
</div>
</div>
</div>
<div class='clear'/>Conclusion
By following the steps above, you can easily How to Install a Newsticker Widget on a Blog and add interesting elements to enhance your visitor's experience. Always remember to check how your blog looks after adding widgets to make sure everything is running properly and looks as expected. Good luck!
https://www.naminakiky.com/2019/04/how-to-install-widget-newsticker-on-blogger.html
