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!