Cara Membuat Headline Breaking News Responsive di Blog

Cara Membuat Headline Breaking News Responsive di Blog

Halo Temans... Beberapa hari kebelakang saya sempat memasang headline breaking news di blog ini, namun karena penempatan di blog saya agak kurang cocok dengan template yang saya pake, jadi fitur tersebut tidak saya pasang, tetapi mungkin diantara Temans Kang Bisson ada yang mau pasang di blog nya masing-masing, Temans boleh coba langkah-langkah pemasangannya yang akan saya uraikan dibawah

Dengan memasang headline breaking news di blog kita (biasanya ditempatkan di bagian atas, header) blog akan menampilkan cuplikan yang menyerupai cuplikan berita berjalan seperti di TV, namun dengan gaya khas yang menyesuaikan isi konten yang terdapat di blog, maka headline tersebut akan menampilkan cuplikan judul artikel Recent Post (Artikel terbaru)

Contoh tampilan breaking news yang akan kita buat, bisa Temans lihat pada gambar diatas. Dari sumber referensi yang saya dapat, saya coba memodifikasinya sehingga seperti apa yang teman lihat pada gambar diatas tersebut (sumber referensi saya sertakan di bawah)

Nah bagi Temans yang ingin memasang fitur headline breaking news di blognya masing-masing, silahkan ikuti langkah-langkahnya berikut ini

1. Masuk ke menu Dashboard

2. ke menu Layout/ Tata Letak >> Add a Gadget >> HTML/JavaScript

3. Copy kode dibawah kemudian Paste-kan di kolom area HTML/JavaScript

<style scoped='scoped' type='text/css'>
#news {border-top:3px solid #ff0000;background: #141414}
#news {display: block; float: left; height: 40px; line-height: 35px; overflow: hidden; padding:10px 0 0 0px; width: 100%; }
.titlenews {color: #ffffff; display: block; float: left; font: bold 13px/22px Tahoma; padding: 6px 0 0 15px;margin: -10px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -16px 0px 0px 165px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0px 0px;padding:2px 0px;}
#ltsposts li a { background: none !important; color:#ffffff !important; font: bold 15px/22px Tahoma; text-decoration: none; }
#ltsposts li a {line-height:36px;}
</style>
<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-bookmark'/> ARTIKEL <span style='color:#FF0000;'> PILIHAN </span> : </span>
<div id='ltsposts'> Loading ... </div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://bukandotnet.blogspot.com/', // 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 () }, 6000); // kecepatan yang diinginkan
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Keterangan

Perhatikan text yang berwarna merah:

// Ganti dengan URL blog Temans

// Maximum berita yang akan muncul

// Kecepatan yang diinginkan

4. Setelah selesai di paste, klik Save/ Simpan

Kode diatas bisa teman sesuaikan lagi sesuai keinginan sobat, tinggal edit-edit sedikit saja entah itu untuk background atau ukuran font nya. Atau sobat boleh juga memakainya seperti tampilan default diatas tanpa mengubah apapun

Untuk menentukan letak posisi widget breaking news tersebut bisa teman sesuaikan saja sesuai selera, tapi biasanya dipasang dibagian atas. Sobat bisa langsung memasukan kode tersebut dibawah kode html menu pada pengaturan "Edit HTML" blog sobat, biasanya struktur kode menu setelah </header>

Demikian artikel KangBisson kali ini tentang Cara Membuat Headline Breaking News Responsive di Blog, selamat mencoba

Terimakasih atas kunjungannya dan semoga bermanfaat

Referensi: kangibay.net