Make Headline Breaking News on Blog

Making Headline Breaking News on Blog - actually this is the same as the recent post or latest post widget but it's just that the breaking news headline widget is horizontal like navigation which is usually installed above the header or under menu navigation or it can also be on the blog footer.

In this breaking news headline widget, it will bring up the latest articles on the left and on the right there is a social media network widget. To install the headline breaking news widget into the blog, it's quite easy, you just need to add a widget and can set it to place where you like by sliding the elements of the layout of the blog layout. To see what it's like to put it in a blog.

How to Make Headline Breaking News on Blog

1. Login on the blogger account.

2. Enter the Layout of the blog and add a widget.

3. Copy the following code and enter it in the HTML / Javascript widget.

<style type='text/css' scoped="scoped">
#news{background:#5cb3f5;border-bottom:5px solid #333;border-top:5px solid #333;display:block;float:left;height:20px;line-height:20px;overflow:hidden;padding:5px 30px;width:835px}.titlenews{background:#333;color:#fff;display:block;float:left;font:bold 12px/22px Tahoma;padding:9px;margin-top:-10px;position:absolute}#ltsposts{float:left;margin-left:120px}#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0}#ltsposts li a{background:none !important;color:#fff !important;font:bold 12px/22px Tahoma;text-decoration:none}ul.shsocial{background:#333;float:right;margin:-8px 0}ul.shsocial li{float:left;list-style:none outside none;border:none}ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivV3vE1isPfyPSxcijMRDBmC4MvbASDEQw7CM6xs1xANZ_gfXoK-_usbCqxrv7YUOYCUBrE-zO_iPSjrzAcUDmelVa7Vc_lYosvFapL4saTUbxgIzxfC09Bd5IvSUdjgQmICUgwbUPBOXc/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px }ul.shsocial li.fb a{background-position:0 0 }ul.shsocial li.gp a{background-position:-96px 0 }ul.shsocial li.rs a{background-position:-192px 0 }ul.shsocial li.tw a{background-position:-256px 0 }ul.shsocial li.fb a:hover{background-position:0 -32px }ul.shsocial li.gp a:hover{background-position:-96px -32px }ul.shsocial li.rs a:hover{background-position:-192px -32px }ul.shsocial li.tw a:hover{background-position:-256px -32px }
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='#' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/+You plus.google' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/YOUR FEED-BLOG' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://stressthinking.blogspot.com', // Replace With your Blog Url
numpostx     = 20; // Maximum Post
$.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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Information:

Change https://stressthinking.blogspot.com with the address URL of your blog.

Change Post # replace with each ID.

4. After everything has been changed correctly the last step is to just click Save.

Results

To determine where the breaking news widget is located, you can customize it with your blog by sliding the layout element.