Cara Membuat Breaking News Keren di Blogger

Cara Membuat Breaking News Keren di Blogger .

1. Masuk ke Dashboard Blogger Anda. Template> Edit HTML dan cari </style>
2. Salin kode CSS di bawah ini dan Paste-kan Sebelum </style>

#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. Copy kode dibawah ini sebelum tag </body>

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

Catatan: " URL Blog Anda " edit sesuai dengan url blog Anda.


4. letakkan Kode HTML dibawah ini di Gadget HTML / Javascript.

<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<div style='clear: both;'/>


5. Selesai.

'' Selamat Mencoba ''

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.