Most people do not read posts the simply follow the steps and add widgets to their blogs so that's why I am not going to provide you much information about this breaking news ticker blogger widget you can simply install it by following the steps provided below on your blogger blog and have fun.
I will share breaking news ticker blogger widget in different styles after this one, so if you want that you should subscribe to the newsletters of this blog and keep visiting this site Daily.
Follow the steps provided below to add this breaking news ticker blogger widget in blogger. If you want to see the demo of this breaking news ticker blogger widget you can see that demo when clicking the demo button below but first of all let me share the source code of this breaking news ticker with you.
Jump To Section:
Want to read Something Special? Jump To The Required Section By Clicking on the links Provided below.Is it Responsive?
Yes, this breaking news ticker blogger widget is very much responsive you can check the responsiveness by viewing online demo by clicking the button provided below.Follow these steps to add breaking news ticker blogger widget in blogger:
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </head>
- Copy the code provided below and paste if just above the tag we founded in step 4.
- Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style>
body {
background: #f8f8f8;
color: #000;
font-family: 'Poppins',sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
font-weight: normal;
}
a{text-decoration:none;}
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin: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 Queries */
@media screen and (min-width:1200px){.site-descriptionpix{margin-top:14px}.footer-widget-area{padding:34px}}
@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>
<script>
// Breaking News
$(document).ready(function(){var e="https://www.sayemtutorial.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>Note that in the above code i have included jquery library because i have used jquery code to make this ticker work properly.
Now you have successfully added the codes that are required for this ticker now follow the steps provided below to make it work properly.
Steps to add Breaking News Ticker Blogger Widget:
- Go to Blogger Dashboard
- Go to Layout Section
- Click Add New widget
- Select HTML/Javascript Widget from the widgets list
- Now copy the code provided below and paste it as widget content.
- Don't Forget To Save Widget
Choose the location where you want to add this widget my recommendations are to add this widget at the top of your web-page.
<div id='breakingwrapper'>
<div id='breakingnews'>
<span class='tulisbreaking'>News Update<span class='breakhidden'></span></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>Wanna See the Demo?
If you want to see the demo of this breaking news ticker follow the link provided below.View Demo
Customize the above code:
To make this blogger widget completely your you have to make customization's if the above code.| Replacement | Description |
|---|---|
| https://www.sayemtutorial.com/ | Replace this url with the url of your website or if you want to auto detect the url simple replace this url with forward slash ( / ). |
Conclusion:
So in this today's article I have shared source code of breaking news ticker blogger widget with you. You can simply copy all the codes and follow the steps to implement this blogger widget into your blogger blog and show up recent posts in a form of breaking news ticker.I hope that this post helps you a lot in am making a breaking news ticker and adding it to your blogger site. If it did make sure to leave your comments below and subscribe the newsletters of this blog to get notifications of new posts.
Post a Comment