Cara Membuat Widget Breaking News Ticker Responsive di Blogger

Cara Membuat Widget Breaking News Ticker Responsive di Blogger

Cara Membuat Widget Breaking News Ticker Responsive di Blogger - Widget breaking news, ialah sebuah widget yang menampilkan beberapa postingan/artikel yang terbaru dari sebuah blog.

Tujuan ditambahkannya widget breaking news ticker di blog

Menambahkannya di blog, bisa mengurangi rasio pentalan (Bounce rate) blog dan juga, bisa menarik perhatian pengunjung yang ada. Oleh sebab itu, kali ini Saya akan membuat artikel tentang membuat widget breaking news ticker responsive di blogger.

Cara Membuat Widget Breaking News Ticker di Blogger

  • Pertama, login ke akun blogger kalian dulu.
  • Kedua, klik opsi Tema => Edit HTML => pastekan kode CSS ini sebelum kode ]]></b:skin>
  • /*=====CSS BREAKING NEWS=====*/
    #beakingnews{width:1000px;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:#0fb717}
    #recentpostbreaking{float:left}
    #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  • Ketiga, pastekan kode Javascript ini sebelum kode </body> dan simpan template.
  • <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    var url_blog = 'https://nonton-filmku.blogspot.com/', //replace with your Domain 
        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>
    Konfigurasi: - Ganti url https://nonton-filmku.blogspot.com dengan url blog kalian.
  • Ke-empat, kalian masuk ke opsi Tata Letak => Tambahkan Gadget => HTML/Javascript => pastekan kode dibawah ini dibagian konten dan Simpan perubahan.
  • <div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
    <div id='recentpostbreaking'>Loading...</div>
    </div>

Akhir Kata ...

Sekian artikel tentang cara membuat widget breaking news ticker responsive di blogger. Apabila kalian menemui kendala, tuliskan kendala tersebut di kolom komentar. Jika kalian tidak keberatan, mohon share artikel ini ke akun media sosial kalian. Terimakasih telah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel