How to Install a Newsticker Widget on Blogger
Today O4U will share tips, How to Install a Newsticker Widget on Blogger. I share the Newsticker widget because there is a request from Blogger friend.
The main function of this widget is to display a list of some of the latest articles with slide animations, almost the same as the recent post widget, but only in the form of the title of the post. Okay, just go ahead. Following the steps on How to Install a Newsticker Widget on Blogger
How to Install a Newsticker Widget on Blogger
First open Blogger > Click the Themes menu and Edit HTML > Then add this CSS code before </head>
Next, add the code below right before </body>
Well, then add the code below freely anywhere as long as it's still in the body between the <body> and </body> as in the previous post.
After that click Save theme button and Finish! Please see the results on your blog.
Okay, that's enough of O4U. Hopefully, it will be useful for all of you. How to Install a Newsticker Widget on Blogger
The main function of this widget is to display a list of some of the latest articles with slide animations, almost the same as the recent post widget, but only in the form of the title of the post. Okay, just go ahead. Following the steps on How to Install a Newsticker Widget on Blogger
How to Install a Newsticker Widget on Blogger
First open Blogger > Click the Themes menu and Edit HTML > 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 right before </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.onet4u.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 nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>Change the code marked with your blog address and change 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 the <body> and </body> as in the previous post.
<div id='breakingwrapper'>
<div id='breakingnews'>
<span class='tulisbreaking'>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()] + "");
</script>
</div>
</div>
</div>
<div class='clear'/>After that click Save theme button and Finish! Please see the results on your blog.
Okay, that's enough of O4U. Hopefully, it will be useful for all of you. How to Install a Newsticker Widget on Blogger
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
Post a Comment
Post a Comment