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:
<div id='header-wrapper'>
<div id='content-wrapper'>
<!-- 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 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; }</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 sobatnumpostx = 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>
- Ganti link berwarna merah di atas dengan link Url blog anda.
- Anda juga bisa ganti/sesuaikan warna background, margin, dll.
