/Cara Membuat Breaking News Ticker blog

Cara Membuat Breaking News Ticker blog

Apa itu News Ticker ?

News=berita dan Ticker=jam  jika di gabungkan menjadi (berita jam), menurut kesimpulan saya sebagai blogger pemula, NewsTicker adalah sebuah alat paling penting untuk memberikan informasi berita terkini kepada pembaca, yang diupdate setiap waktu, dalam dunia blogging news ticker biasanya digunakan untuk menampilkan artikel terbaru atau informasi artikel populer, postingan kali ini akan membahas cara mudah pasang Breaking News Ticker pada blogspot.

Jadi bagaimana cara memulainya ?

1. Login ke Blog sobat

2.Klik menu Tema > Edit HTML dan cari </style>

3. Copy kode CSS di bawah ini dan paste sebelum </style>

#breakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}

#breakingnews .breaking{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}

4. Selanjutnya sobat Copy lagi kode di bawah ini dan paste  sebelum tag </body>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function () {

var url_blog = ‘https://bukangoogleblog.blogspot.co.id/’, //ganti dengan URL Blog Anda

    numpostx  = 1; //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’).slideRight( function () { $(this).appendTo($(‘#recentpostbreaking ul’)).slideLeft(); });

            }

        setInterval(function(){ tick () }, 5000);

        } else {

            $(‘#recentpostbreaking’).html(‘<span>No result!</span>’);

        }

    },

    error: function() {

            $(‘#recentpostbreaking’).html(‘<strong>Error Loading Feed!</strong>’);

       }

});

});

//]]>

</script>

5. Kemudian sobat akan mengatur tataletak dimana akan menampilkan “Breaking News Ticker” pada blog dengan menggunakan kode HTML di bawah ini;

<div id=’breakingnews’><span class=’breaking’>Breaking News:</span>

<div id=’recentpostbreaking’>Pleasewait…</div>

</div>

Terima kasih anda sudah berkunjung dan membaca keseluruhan postingan kali ini, kini pertanyaan saya adalah; Apa yang hendak anda lakukan? Apakah anda akan terus membacanya tanpa melakukan apapun? Apakah anda hanya membacanya sekali?. Apapun itu, pastikan anda mendapatkan apa yang anda ingingkan dari postingan saya kali ini, dan jika anda kesulitan mempraktikkanya saya telah membuat video eksklusif hanya untuk anda di bawah ini: