Notification texts go here. Contact Us Buy Now!

Get your blog ready With details you won't find anywhere.

Create Breaking News Widget Lightweight For Blogspot

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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="",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></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 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(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);            var now = new Date();            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);         </script>      </div>   </div></div><div class='clear'/>

Done, now click Save topic and go to your blog to see the results :V
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.

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.