Breaking News Widget: Breaking News widget is very useful to the News Blogs and even Niche blogs because new users who have visited the site from the Google may only see the information what they need and they will not return to the home page for more information. So at that time, this breaking news widget will be very useful to the users. It will show the total post titles which you wrote in your blog.
In this Way, You will get the use of User Engagement as well the best User Experience. As we all know that the User Experience and User Engagement playing an important role in the new updates of Google. The Implementation is quite easy and simple. This Breaking News Widget for Blogger will help you to drive some more Traffic for Free. So follow according to the below process.
How to Add Breaking News Widget for Blogger
Just follow according to the steps and install these Breaking New Html Codes in your blogger website. This Headline News widget for blogger will be more helpful and best to use it. Just go through the below process carefully.
Page Contents
Benefits & Features of Breaking News Widget for Blogger:
As I told you above there are many useful features by adding a breaking news widget for websites or blogs. We will provide you with some awesome benefits and features which you get by adding it.
- Best Designs to Attract Users
- Fully customized Code without any issues.
- Makes the User Most Engaged.
- Decrease the Bounce Rate
- The Time spent by the User will be Increased
- Best way to Show Other Blog Articles to the Users.
There are many such useful features by adding the widget breaking news to blogger. Now, let’s check with the main process.
Steps to Add Breaking News Widget for Blogger:
Steps will be Easy enough to do. Just search for the terms and you are good to go.
So these are the steps to follow
Step 1) Go to the Blogger Dashboard.
Step 2) Then ..>>Template..>>Edit Template.
Step 3) Search for </body>
Step 4) Copy and Paste the below code before </body>
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<script type=’text/javascript’>
//<![CDATA[
$(document).ready(function () {
var url_blog = ‘YOUR URL HERE’, //replace with your Domain
numpostx = 10; //Posts want to display
$.ajax({
url: ” + url_blog + ‘/feeds/posts/default?alt=json-in-script&max-results=’ + numpostx + ”,
type: ‘get’,
dataType: “jsonp”,
success: function(data) {
var posturl, posttitle, skeleton = ”,
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = “<ul>”;
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == “alternate”)
{
posturl = entry[i].link[j].href;
break;
}
} posttitle = entry[i].title.$t;
skeleton += ‘<li><a href=”‘ + posturl + ‘” target=”_blank”>’ + posttitle + ‘</a></li>’;
}
skeleton += ‘</ul>’;
$(‘#recentpostbreaking’).html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$(‘#recentpostbreaking li:first’).slideUp( function () { $(this).appendTo($(‘#recentpostbreaking ul’)).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$(‘#recentpostbreaking’).html(‘<span>No result!</span>’);
}
},
error: function() {
$(‘#recentpostbreaking’).html(‘<strong>Error Loading Feed!</strong>’);
}
});
});
//]]>
</script>
</b:if></b:if>
Step 5) Search for </head>
Step 6) Copy and Paste the below code before </head>
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<style type=’text/css’>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#5F0000}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
</b:if></b:if>
Step 8) Paste the below code in the Gadget.
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType != "item"’>
<div id=’beakingnews’><span class=’tulisbreaking’>Breaking News</span><!– tag pembuka tempat Breaking News–>
<div id=’recentpostbreaking’>Loading…</div><!– tag tempat daftar Breaking News ditampilkan–>
</div><!– tag penutup tempat Breaking News–>
</b:if></b:if>
<div style=’clear: both;’/>
Step 9) Save the Gadget.
Note: Don’t forget to add the widget to the Center place.
This is How we need to Add Breaking News Widget to Blogger in 2019. This would be the Best process to add the breaking news widget in an easy way.
Recommendations:
These are the Recommendations giving by a Basictricks to the Bloggers to develop themselves by the below Articles.
- How to Add Floating Ads Widget to Blogger.
- Best ways to Drive Traffic from Google plus.
- How to Add Random Ads Widget to Blogger.
- Free .Edu and .Gov Backlinks.
- How to Add Facebook Popup Like Box for Blogger.
- How to Create a sitemap for blogger.
Conclusion:
Hence, This is the way how to add the Breaking News widget to the Blogger. Hope you have learned all the process of adding the breaking news widget to blogger blog without any issue or problems. If you face any issues regarding the Breaking News Widget feel free to the ask the doubt in the comment Section. We will help you out. Like us and Share the article with your blogger friends. Stay Tunned to Basictrick for More Tutorials on Blogger.
This comment has been removed by a blog administrator.
This comment has been removed by a blog administrator.
what gadget please?
what gadget please?
Not working all time shows loading… please help me
http://islamicbooksinurdupdf.blogspot.com/
pls my it also showing loading on my blog as well, what is a way forward
hi,
what i need is a little bit different i need a popup light box on my homepage which shows the posts which i exclusively want it to show, not the latest but the one i tag. can you help.
html box dear…. Try it.
This comment has been removed by a blog administrator.
Hello, how I do for my widget to appear in mobile version? (i mean in responsive)
Thank's For Your Widget 🙂
Thanks nice tricks
Thanks…… I Love this website
NICE
this widget is working my site …..thanks
Can you help me the same topic for specific labels? i need to marquee only for specific labels
Thanks you solve my problim
thanks for the good brother, i follow your tutorial successfully but i encountered a problem which the slider only shows"Loading" pls help
Thank you…
You are Welcome.
Keep on working, great job!
Thanks 🙂