How to Put News Feed or Breaking News on Template Navigation Bar

I was looking for a scripts for news feed and finally someone give me idea to copy from other blog template.

Navigation news feed shows your latest post like Headline News.

Now here what I did..

The scripts is from Perfect Mag by Sora Template.

Before you try to do this BACKUP your Template First!! .

1. Go to your Template and find this keyword "skin>" .

2. Paste this Breaking News Code after the <b:skin>

CODE

    /* breaking news
----------------------------------------------- */
#beakingnews {
float: left;
height: 30px;
line-height: 28px;
overflow: hidden;
width: 47%;
}
#recentpostbreaking li a {
color:#fff;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
#recentpostbreaking li a:hover {
color:#333;
}
#beakingnews .tulisbreaking {
background:#333;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
padding: 2px 10px;
position: absolute;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
background: #85B200;
color: #FFF;
font-family: Oswald,arial,Georgia,serif;
text-transform: uppercase;
font-size: 10pt;
}
#recentpostbreaking {
float: left;
margin-left: 100px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:2px  0 0}

/* End breaking news
----------------------------------------------- */

3. Now find another keyword "primary" this is where your navigation bar code place.
we actually creating new navigation bar.

4. Paste this code before <div id='outer-wrapper

CODE

    
<div id='outer-wrapper'>
      <div id='top-nav'>
        <nav class='top-menu'>

<div id='beakingnews'>
<span class='tulisbreaking'>DON'T MISS</span>
  <div id='recentpostbreaking'>
Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.blogmytuts.net/', // 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>
';
            $('#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('<b>Error Loading Feed!</b>');
       }
});
});
//]]>
</script>
  </nav>
      </div>
</div>

5. Edit this part with your own blogsite and number of post 20 , you can also change the DON'T MISS
just find DON quotes MISS. then Save!