Cara Membuat Breaking News Ticker di Blogger

Info Blog News – Cara Membuat Breaking News Ticker di Blogger. Breaking News adalah alat yang paling penting dan populer untuk blogger. Widget ini membantu pengguna atau pengunjung blog melihat update terbaru dari artikel yang Anda publikasikan atau menambahkan widget ini, Anda juga dapat dengan mudah menampilkan posting terbaru Anda.

Saya berharap tutorial ini bisa membantu mempercantik tampilan template Blog Anda. Oke sekarang mari kita mulai dengan tutorialnya.

1: Masuk ke Dashboard Blogger Anda. Template> Edit HTML dan cari </style>

2: Salin kode CSS di bawah ini dan Paste-kan Sebelum </style>

CCS - Info Blog News

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

HTML - Info Blog News

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

Catatan: "Letakkan URL anda disini" edit sesuai dengan url blog Anda.

4: Sekarang letakkan Kode HTML dibawah ini, letakkan kode di mana Anda ingin tampilkan widget Headline News. Anda juga bisa menambahkan kode di bawah ini pada Gadget HTML / Javascript.

HTML - Info Blog News

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

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

</div>

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

Note : Pada umumnya pemula akan banyak menemui kesulitan dalam menempatkan script pada templete blog, saran saya backup dulu templete Blog sebelum melakukan modifikasi atau penambahan widget headline news diatas. Jika Anda menemui kesulitan dalam menampilkan widget, silahkan tinggalkan komentar dibawah…agar saya bisa membantu memberikan solusi. Semoga bermanfaat…