Responsive News ticker widget cho blogger

<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.kimidev.site",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>