Breaking News Widget: Breaking News Widget is very useful for News Blogs because new users who have visited the site from Google may only see the information they need and they will not return to the homepage for more information. So then this Breaking News Widget will be very useful to users. It will show the total number of post titles that you have written in your blog.
Benefits & Features of Breaking News Widget Lightweight For Blogspot:
- The best design to attract users
- Fully custom code without any problems.
- Get the most users engaged.
- Reduce bounce rate
- User Time Will Be Increased
- Best way to show other blog posts to users.
Steps to add Breaking News Widget Lightweight For Blogspot:
1. Login to Blogger
2. On Blogger dashboard, Select Theme Edit HTML
3. Find the </head> tag and paste the below CSS above it
<style type='text/css'>/* Breaking News TL */#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>
4. Then add the following JavaScript above the </body> . tag
<script type='text/javascript'>//<![CDATA[// Breaking News TL$(document).ready(function(){var e="https://www.nguyenlamblog.xyz/",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></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 nguyenlamblog.xyz with your blog address and replace the number 10 with the number of posts you want to display.
5. Finally, save the code below where you want to display it. But it must be in <body> and </body> .
<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'/>
Done, now click Save topic and go to your blog to see the results :V
Demo
Hope the article Create Breaking News Widget Compact For Blogspot is useful to you. Don't forget to comment to let us know what you think.