Cara Membuat Breaking News Responsive Blog

Cara membuat breaking news responsive berjalan di blog seperti yang terlihat pada gambar bisa sobat buat dengan mudah. Dengan adanya headline maka blog kita akan terlihat seperti cuplikan berita berjala di TV.

Membuat headline news berjalan di blog sama seperti widget recent post (postingan terbaru) nama pada widget headline breaking news responsive ini berbentuk horisontal karena akan di pasang di header atau widget breaking news ini biasa di pasang di bawah menu.



Langsung saja berikut tutorial cara menambahkan widget headline breaking news responsive di blog.

1. Login pada akun blogger.
2. Masuk ke Layout → Add a Widget.
3. Copy kode dibawah ini, lalu masukan kedalam widget HTML/Javascript.

<!-- breaking news kangibay.net -->
<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #E6A816; border-top: 0px solid #333; display: block; float: left; height: 30px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -3px 0px 0px 137px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7anX1AFMyayCSyygkEjf9TDPc2FvOA6XG9gubGqngLLjHn8UbJYEZKDWKWRIcu3kb5z9uFRFtjDbd8VJaOADerzoKFZuB-ZUJKx76YVrTwjBQX73ErIDo2_TYWhUMkluuQo8HpTBsYuHn/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>

<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-bookmark'/> BREAKING <span style='color:#E6A816;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://namablogkamu.blogspot.co.id/', // Ganti dengan URL blog sobat
numpostx     = 10; // Maximum berita yang akan muncul
$.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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Keterangan:
// Ganti dengan URL blog sobat
// Maximum berita yang akan muncul
// Kecepatan yang diinginkan

4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.

Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog sobat dengan mengubah beberapa value kode html widget tersebut.

TAMBAHAN : Selain menggunakan Add a Wigdet, sobat bisa langsung memasukan kode tersebut dibawah kode html menu pada pengaturan "Edit HTML" blog sobat, biasnya struktur kode menu setelah </header>

---

Itu saja tutorial menambahkan headline breaking news responsive pada blog, semoga bermanfaat.