Membuat Headline Breaking News Blog

How To Make A Breaking News Headline In Blog :- This is actually the same as recent post widgets or latest post, but only on breaking news headlines widget is shaped like a horizontal navigation is usually in pairs above the header or below the navigation menu above or you can also blog footer.
In this breaking news headlines widget will bring up any of the latest articles on the left and on the right there is a media social networking widgets. To install the widget breaking news headlines in your blog easy way, you only need to add widgets and can be set to be put where the places you like to shift the element layout blog layout. To see what kind of put it in your blog, here are the steps for How to Make Headlines Breaking News on the Blog.

Easy to install Headlines widget to Blogger Follow the instructions
1. Login to your blogger account.
2. Go to Layout blogs and add widgets.
3. Copy the following code and then enter into the widget HTML/Javascript.

<style type='text/css' scoped="scoped">
#news { background:#52e052; 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:#333 !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/AVvXsEhYjyv-o79YWo9BUFAJ-Uh11PhbQQ9_3LYzaeCGRfZKu8QqEQk6USX7xchiKRtPFFGL4aVxLqechOIwkegdeCsx-rVe6Z40AX3p7KIIpzv22rFk_zUuH0gTP4ZAPbnOXWJGNq0miOr7rq6z/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.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='http://www.facebook.com/pages/xxxx' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/xxxx' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/xxxx' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/xxxx' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://namablog.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>

Note : Posts blue color change to the width of your blog.
Change http://nama.blogspot.com with the URL address of your blog.
Change Red colour items to their IDs.
4. After all has been replaced with the correct final step just click Save and enjoy.
To determine where the location of the breaking or headlines or feed headlines news widget can customize to your blog by shifting the layout elements.
Easy to install Headlines widget to Blogger Follow the instructions