How To Create Responsive Breaking News Widget On Blogger

Bismillaahirrahmaanirrahiim

Assalaamu'alaikum Wr Wb!

Breaking News is the news of the opening of which on a website or blog is used to display or to open the headlines or recent news of the articles posted on your website or blog, this widget responsive on your desktop, tablet and mobile, it looks very beautiful too professional , This widget is very lightweight and secure so it does not interfere with the speed of loading and activities website or blog. The widget can make your webpage or your blog look professional, this widget is simple and modern.

This widget is very useful to visitors in the arikel latest available on a website or blog and even provided the composition of the next article, because new users who visit a web page or blog from Google only can see what information they need and they will not be back to the main page for more information. So, at the moment this widget will be very useful to visitors. It will show the title of the article you wrote in your website or blog, this widget only displays the title of the article you post so that makes visitors feel curious about the continuation of the article on your website or blog. I highly recommend this widget to your website or blog.

This widget is similar to greet visitors presenting the title of the article is posted on a website or blog, it appears in animated style emerged from the ground up in a packing box or horizontal rectangular box. The widget does not use jQuery since raised only by using a lightweight CSS JavaScript for your website or blog, with the addition of icons from Font Awesome makes this widget is gorgeous and beautiful modern-day trend. Many websites and blogs popular professional use this widget, even in his own style and you can also design the widget according to the style you want.

Before you receive a tutorial from me, it would be nice to see the result is that you believe in applying this widget to your website or blog⇩

Result
Click To View

1. Login to Blogger> Template> Edit HTML and put the following CSS above / before the ]]></ b:skin> tags or the </style> tags⇩

/* Responsive Breaking News By rahmatarifish.blogspot.com */
#ra-breakingnews {margin:0px 0 0 0;margin-left:0px;margin-right:0px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #006600;}
#ra-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #006600;color:#fff;display:block;float:left;font-family:Open Sans;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-raish-news li a {font-family:Open Sans;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-raish-news li a:hover {color:#009900;}
#breaking-raish-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-raish-news ul,#breaking-raish-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#ra-breakingnews {margin:0px 0 0 0;margin-right:0;}
#ra-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-raish-news {margin-left:50px;}}

2. Put the following JavaScript above / before the </body> tags⇩

<script type='text/javascript'>
//<![CDATA[
// Responsive Breaking News By rahmatarifish.blogspot.com
$(document).ready(function(){var e="your blog url",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-raish-news li:first").slideUp(function(){$(this).appendTo($("#breaking-raish-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'">'+r+"</a></li>"}s+="</ul>",$("#breaking-raish-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-raish-news").html("<span>No result!</span>")},error:function(){$("#breaking-raish-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Option: Change the words "your blog url" blue with your blog url.

3. Put the following HTML below / after the </header> tags⇩

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='ra-breakingnews'><span class='head-breaking'><i class='fa fa-bolt'/></span>
<div id='breaking-raish-news'>Loading...</div></div>
</b:if>
</b:if>

4. Save Template.

5. Alhamdulillaah, tutorial is ready.