Cara Memasang Widget Breaking News Berjalan Tanpa Thumbnail

Halo kembali lagi bersama teman husen, kali ini kita akan membahas ihwal Cara memasang widget headline breaking news berjalan tanpa edit HTML. Cara ini bantu-membantu sangat banyak di pencarian google tetapi widget headline breaking news yang kali ini akan aku bahas sangat gampang untuk dipasang pada blog teman tanpa mengubah dari template caranya tinggal,copy & paste script ke dalam Widget/HTML.

Widget headline news blogger ini alangkah baiknya di letakan di bab atas atau sering di sebut header. Untuk fungsinya itu sendiri sama menyerupai di televisi adalah teks yang berjalan dengan menampilkan headline info terkini.

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

Cara Memasang Fitur Breaking News Berjalan Dengan Praktis Pada Blogger

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

Pertama teman harus melaksanakan login terlebih dahulu ke blogger.com supaya sanggup masuk ke dalam dashboard. Kemudian sehabis melaksanakan login selanjutnya pilih sajian Dashboard > Tata Letak > Tambah Gadget > Pilih HTML/JavaScript > Pastekan script HTML breaking news pada Konten.

Kodenya sanggup 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/AVvXsEg4TVnIPwx4dQyjOlpNsip3rCgXHnDD4evrCmTdULyxW2nP5R5Uni0DvvPMXLOM4G_afpgJtC5iqsqzJQqfgkEX5XJSIQ1bMBR73Lysl02LeRkmJ58WOUXtRIp8PeBLFvN8OYc3_GIkY_9W/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://caratepatq.blogspot.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://caratepatq.blogspot.com'

Catatan : 

• Kode ini #49505a untuk mengganti warna background

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

• Anda juga sanggup mengganti goresan pena ini BREAKING

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

• Anda juga sanggup mengganti goresan pena 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 menyerupai berikut ini.

Begitulah Cara Memasang Widget Breaking News Berjalan Tanpa Thumbnail biar membantu dan bermanfaat. Wassalamualaikum.
Sumber https://www.sobathusen.com/