Cara Membuat Breaking News Postingan di blogger

Selamat Pagi Sobat blogger dimanapun berada
SELAMAT HARI ULANG TAHUN RI YANG KE 72
SEMOGA INDONESIA SEMAKIN JAYA

Di pagi yang cerah, di hari yang spesial ini saya akan memberikan pengetahuan seputar trik membuat Breaking News yang berisi postingan blog sobat seperti apa sih Breaking News di blog itu?

Breaking News

Breaking News tersebut akan menampilkan posting posting dari blog kalian, sobat bisa mengatur berapa jumlah banyak posting yang akan ditampilkan.
nah sekarang simak caranya berikut :

1. Masuk ke akun blogger kalian, masuk ke Dashboard - Templale - Edit HTML
2. Tempatkan Kode berikut sebelum ]]></b:skin>

#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;} #beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515} #recentpostbreaking{float:left} #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

3. Sekarang Paste kan script dibawah ini sebelum </body> dan teks warna merah ganti url blog sobat

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'letakkan URL Blog Anda disini', //ganti dengan URL Blog Anda

    numpostx  = 10; //Posts want to display

$.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>

 4. Hampir selesai sob, tinggal satu langkah lagi copas kode html dibawah ini dan pastekan di bagian blog yang sobat inginkan.

<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>

<div id='recentpostbreaking'>Loading...</div>

</div>

<div style='clear: both;'/>

Saya pastekan disini, bisa sesuai keinginan