Making Breaking News on Blogspot

If you visit a blog with the concept of news, breaking news become common and is generally placed at the top of an article. As well as widget -related article , I consider this breaking news can increase pageviews on a blog. Perhaps any of you want to know how to make it. This time I will explain a bit how to make a simple breaking news that appears at the top of the article.

Phase 1

Recognize the structure of the HTML of the template used. It is very important to know because it will determine where it will be stored breking news. Example:

 < body >
< div  id = 'outer-wrapper' >  <! - opening tag for id outer-wrapper ->
< header  id = 'header-wrapper' >  <! - opening tag for the header ->
< b: section  class = 'header'  id = 'header'  maxwidgets = '1 '  showaddelement = 'no' >
< b: widget  id = 'header1'  locked = 'true'  title = 'Demo Templates (Header)'  type = 'Header' />
</ b: section >
</ header >  <! - closing tag for the header ->
< nav  id = 'nav' >  <! - Tag Opener for navigation ->
< ul >
< li > < a  href = '/' > Home </ a > </ li >
< li > < a  href = '/' > About </ a > </ li >
< li > < a  href = '/' > Archive </ a > </ li >
< li > < a  href = '/' > H </ a > </ li >
</ ul >
</ nav >  <! - closing tag for the navigation ->
< div  id = 'content-wrapper' >  <! - Tag Opener for the content area and sidebar ->
< div  id = 'main-wrapper' >  <! - Tag Opener for regional posts and comments ->
< b: section  class = 'main'  id = 'main'  showaddelement = 'no' >
< b: widget  id = 'Blog1'  locked = 'true'  title = 'Blog Posts'  type = 'Blog' />
</ b: section >
</ div >  <! - Tag Cover for regional posts and comments ->
< aside  id = 'sidebar-wrapper' >  <! - Tag Opener for the sidebar ->
< b: section  class = 'sidebar'  id = 'sidebar'  preferred = 'yes' />
</ aside >  <! - Tag Cover for the sidebar ->
</ div >  <! - closing tag for the content area and sidebar ->
< footer  id = 'footer-wrapper' > <! - opening tag for the footer ->
< b: section  class = 'footer'  id = 'footer' />
</ footer > <! - closing tag for the footer ->
</ div >  <! - closing tag for id outer-wrapper ->
</ body >

Breaking News can be placed under the tag with id content-wrapper (line 19) or can be after the tag with id main-wrapper .
For simplicity we will put under the id main-wrapper (line 21). This means that the widget will appear on top of the post with a maximum width equal to the posting area.
Due to the id of each template blogspot is usually not the same to facilitate searching by way of press CTRL + F and search for id = 'Blog1' breaking the code call is placed on top Newsnya <b: section (b: section here on line 22.) If you already know at this stage we ketahap next.

Phase 2

At this stage the html tag that will include Breakin Newsnya will be on call in the tag. HTML tag like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
</b:if>

In the div tag id amid recentpostbreaking therein breaking news article will list will be called. So if such examples, the full code tags so like this:

 < body >
< div  id = 'outer-wrapper' >  <! - opening tag for id outer-wrapper ->
< header  id = 'header-wrapper' >  <! - opening tag for the header ->
< b: section  class = 'header'  id = 'header'  maxwidgets = '1 '  showaddelement = 'no' >
< b: widget  id = 'header1'  locked = 'true'  title = 'Demo Templates (Header)'  type = 'Header' />
</ b: section >
</ header >  <! - closing tag for the header ->
< nav  id = 'nav' >  <! - Tag Opener for navigation ->
< ul >
< li > < a  href = '/' > Home </ a > </ li >
< li > < a  href = '/' > About </ a > </ li >
< li > < a  href = '/' > Archive </ a > </ li >
< li > < a  href = '/' > H </ a > </ li >
</ ul >
</ nav >  <! - closing tag for the navigation ->
< div  id = 'content-wrapper' >  <! - Tag Opener for the content area and sidebar ->
< div  id = 'main-wrapper' >  <! - Tag Opener for regional posts and comments ->
< b: if  cond = 'data: the blog.pageType == "item"' >
< div  id = 'beakingnews' > < span  class = 'tulisbreaking' > Breaking News </ span > <! - where the opening tag Breaking News ->
< div  id = 'recentpostbreaking' > Loading ... </ div > <! - Breaking News tag roster spot displayed ->
</ div > <! - tag cover Breaking News ->
</ b: if >
< b: section  class = 'main'  id = 'main'  showaddelement = 'no' >
< b: widget  id = 'Blog1'  locked = 'true'  title = 'Blog Posts'  type = 'Blog' />
</ b: section >
</ div >  <! - Tag Cover for regional posts and comments ->
< aside  id = 'sidebar-wrapper' >  <! - Tag Opener for the sidebar ->
< b: section  class = 'sidebar'  id = 'sidebar'  preferred = 'yes' />
</ aside >  <! - Tag Cover for the sidebar ->
</ div >  <! - closing tag for the content area and sidebar ->
< footer  id = 'footer-wrapper' > <! - opening tag for the footer ->
< b: section  class = 'footer'  id = 'footer' />
</ footer > <! - closing tag for the footer ->
</ div >  <! - closing tag for id outer-wrapper ->
</ body > 

Phase 3

At this stage is to put jQuery code breaking news before the </ body> . JQuerynya code like the following:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'URL_blog disini', // alamat blogmu contoh http://mkr-site.blogspot.com
    numpostx = 10; // Jumlah artikel yang di tampilkan
$.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('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>
</b:if>

Stage 4 

At this stage add the Breaking News earlier in the CSS code to make it look more attractive. This code will be placed before the </ head>

code like the following

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#beakingnews{line-height:25px;height:25px;background:#F7F7F7;overflow:hidden}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#008D17}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
</b:if>

NB: To change the background color on paper changing Breaking News code # 008D17 , Breaking News text color change code # FCFCFC and background color of the title that appears change the code # F7F7F7 . Changing the color could use a Hex Color Tools . Nah that's the way to make breaking news that I know of. All wrapped code using conditional tags only on the post (<b:if cond='data:blog.pageType == "item"'>) . conditional tags can be changed as you want. Sources securities code: workshop.rs