Cara Mudah Membuat Headline/Breaking News Keren di Blog

Santos el Salam

14 Oktober 2020

Saat mengunjungi website atau blog dengan kategori seperti berita, biasanya kita akan menjumpai tampilan berupa cuplikan judul-judul postingan terbaru, terhangat atau teraktual di web atau blog tersebut. Tampilan bergerak tersebut biasa juga disebut dengan istilah headline atau breaking news. 

Breaking news merupakan widget yang biasa dipasang di web atau blog dengan tujuan memperindah tampilan, melengkapi navigasi dan meningkatkan pageview blog. Jika diperhatikan, fungsi seperti ini sebenarnya sama dengan widget recent post atau artikel terbaru, hanya saja tampilan pada fitur breaking news ini hanya berupa judul artikelnya saja. 

Meski begitu, cuplikan judul-judul postingan tersebut ditampilkan secara bergantian sehingga selalu bergerak untuk menampilkan postingan-postingan terhangat tersebut. Biasanya, fitur headline atau breaking news berbentuk horizontal ini ada yang diletakkan di atas header blog atau ada juga yang diletakkan di bawah menu navigasi. 

Pada postingan kali ini, saya ingin berbagi script tentang cara membuat fitur breaking news sederhana di blog dengan mudah. Saya juga sudah mencobanya di blog ini dan scriptnya berfungsi dengan baik. Namun karena blog saya ini sudah terlalu banyak widget jadinya saya copot kembali. Tampilan screenshotnya seperti di bawah ini:

Tertarik untuk memasangnya di blog anda?, silahkan ikuti tutorial berikut ini. 

Cara Memasang Breaking News di Blog

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Jika anda ingin meletakkan fitur ini di atas header, silahkan cari kode seperti berikut ini:

<div id='header-wrapper'>

Atau jika anda ingin meletakkan fitur ini di bawah menu navigasi atau di atas isi konten, cari kode seperti berikut ini:

<div id='content-wrapper'>

Perlu diketahui bahwa setiap template memiliki kode berbeda sehingga anda bisa cari kode yang mirip seperti di atas. Setelah kode yang dicari sudah ketemu, salin script berikut ini dan letakkan di atas kode tersebut. 

<!-- Breaking News -->
<style scoped='scoped' type='text/css'>
#news {background:#333; border-bottom: 3px solid #f00; border-top: 0px solid #333; display: block; float: left; height: 30px; line-height: 25px; overflow: hidden; padding: 4px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 6px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -3px 0px 0px 127px;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; }
@media screen and (max-width:384px){
.titlenews {font: bold 10px/18px Tahoma;margin: -4px 0 0 0;}
#ltsposts {float: left;margin: -3px 0px 0px 105px;}
#ltsposts li a {font: bold 10px/18px Tahoma;}}

</style>

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

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'https://massan7.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 link berwarna merah di atas dengan link Url blog anda. 
• Anda juga bisa ganti/sesuaikan warna background, margin, dll. 

4. Simpan kembali template dan lihat hasilnya. 

Selain masuk edit html template, cara mudah lainnya anda juga bisa masukkan kode di atas lewat menu tata letak (layout) ➡ tambahkan gadget ➡ html/javascript. Pilih penempatan yang sesuai agar kemunculannya seperti yang diinginkan.

Jika sudah diatur semua yang diperlukan, silahkan simpan kembali widget dan anda bisa lihat hasilnya. 

Demikianlah Cara Mudah Membuat Headline/Breaking News di Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Mudah Membuat Headline/Breaking News Keren di Blog. Please share...!

Facebook

Twitter