Cara Memasang Widget Breaking News Berjalan Tanpa Thumbnail

Halo kembali lagi bersama sobat husen, kali ini kita akan membahas tentang Cara memasang widget headline breaking news berjalan tanpa edit HTML. Cara ini sebenarnya sangat banyak di pencarian google tetapi widget headline breaking news yang kali ini akan saya bahas sangat mudah untuk dipasang pada blog sobat tanpa mengubah dari template caranya tinggal,copy & paste script ke dalam Widget/HTML.

Widget headline news blogger ini alangkah baiknya di letakan di bagian atas atau sering di sebut header. Untuk fungsinya itu sendiri sama seperti di televisi yaitu teks yang berjalan dengan menampilkan headline berita terkini.

Untuk widget breaking news html script ini yang akan di pasangkan pada blogspot juga, memiliki fungsi yang sama yaitu menampilkan artikel-artikel sebelumnya yang terbaru secara berurutan hanya berupa judul artikel dan tanpa thumbnail. Langsung saja kita bahas untuk cara pembuatan headline berita artikel pada blogspot. Baca juga Cara Membuat Widget Random Post Bergerak Pada Blog

Cara Memasang Fitur Breaking News Berjalan Dengan Mudah Pada Blogger

# Langkah 1: Masukan Script HTML Breaking News Berjalan Pada Blog

Pertama sobat harus melakukan login terlebih dahulu ke blogger.com supaya bisa masuk ke dalam dashboard. Kemudian setelah melakukan login selanjutnya pilih menu Dashboard > Tata Letak > Tambah Gadget > Pilih HTML/JavaScript > Pastekan script HTML breaking news pada Konten.

Kodenya bisa di copy & paste di bawah ini.

<!-- breaking news www.sobathusen.com -->
<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #069adc; 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/AVvXsEhn44kcM6EW4LIZZnwZvt4PsjkPBAJatyaD7NTMI2Jb1GwhUqb8ewuBwAskXcVcy2aJBrLkpmJtx_7aw0D1vL4GhE-ZYC32CSvfH8Pnsh2eVFdWRamsHnETsyVHeHhpTRn6p0HZloW2q2kC/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:#069adc;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://www.sobathusen.com/', 
numpostx     = 10; 
$.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); 
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Penting :
Ganti url ini dengan url blog anda var url_blog = 'https://www.sobathusen.com/'

Catatan : 

• Kode ini #49505a untuk mengganti warna background

• Kode ini border-bottom: 4px solid #069adc untuk mengganti background garis

• Anda juga dapat mengganti tulisan ini BREAKING

• Kode ini style='color:#069adc untuk mengganti warna tulisan News

• Anda juga dapat mengganti tulisan News

• Kode ini untuk jumlah artikel yang akan di tampilkan numpostx = 10;

• Kode ini untuk mengatur kecepatan pergantian judul artikel setInterval(function(){ tick () }, 3000);

# Langkah 2: Berhasil Memasang Headline Berita Artikel Pada Blog

Jika sudah memasukan HTML/JavaScript breaking news berjalan pada blog maka pada header akan muncul seperti berikut ini.

Begitulah Cara Memasang Widget Breaking News Berjalan Tanpa Thumbnail semoga membantu dan bermanfaat. Wassalamualaikum.