Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger

Cara Nambahi Breaking News

Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger, judul ini kayaknya udah nggak asing bagi kebanyakan blogger. Namun sedikit saya jelaskan arti dari Breaking News.

Menurut wikipedia.org Breaking News juga dikenal sebagai laporan khusus atau buletin berita, adalah masalah saat ini yang penyiar merasa perlu menyela jadwal pemrograman dan/atau berita saat itu untuk melaporkan rinciannya. Penggunaannya juga diterapkan pada cerita yang paling signifikan pada momen tersebut atau cerita yang sedang diliput secara langsung. Ini bisa jadi sekadar sebuah cerita yang punya kepentingan luas bagi pemirsa dan memiliki dampak kecil di sisi lain. Sering kali, berita sela digunakan setelah jaringan berita melaporkan cerita ini. Jika cerita belum pernah dilaporkan sebelumnya, grafis dan frasa "baru saja masuk" kadang-kadang digunakan sebagai gantinya.

Wes pokok ngunu kui lah, langsung aja kita siapkan codingnya, pertama kita siapkan Style CSS. ini fungsinya untuk mengatur tampilan tata letak Breaking News dan ukuran yang pas pada template Blogger kita.

<style> 
            .ticker_wrap{
              background:#ebebeb;
              border-top:1px solid rgb(60, 60, 60);
              border-bottom:1px solid #dadada;
              height:40px;
              padding:4px 0 3px 0;
            }
            #beakingnews {
              border-bottom: 1px solid #DDDDDD;
              border-top: 1px solid #DDDDDD;
              height: 31px;
              line-height: 25px;
              /*margin: 0px 20px 0;*/
              overflow: hidden;
              padding: 2px;
              background:#fff;
            }
            #recentpostnews li a {
              font-family: sans-serif;
              font-weight: bold;
              font-size: 12px;
              color: #333;
            }
            #beakingnews .wdxbreaking
            {
              background: none repeat scroll 0 0 #CD2122;
              border-bottom: 1px solid #CD2122;
              border-right: 1px solid #DDDDDD;
              border-top: 1px solid #CD2122;
              border-left: 1px solid #CD2122;
              color: #FFFFFF;
              display: block;
              float: left;
              font-family: sans-serif;
              font-weight: bold;
              font-size: 12px;
              margin: -3px 5px 0 -1px;
              padding: 2px 7px;
              position: absolute;
            }
            #recentpostnews {
              float: left;
              /*margin-top: 0;*/
            }
            #recentpostnews ul,#recentpostnews li{list-style:none;margin-left:25px;padding:0}
	</style>

Copy code diatas dan letakkan di atas </head> pada template Blogger anda. Code diatas bisa anda rubah sesuai dengan selera.

Langkah yang kedua, kita copy code HTML nya dan letakkan dimana nanti Breaking News akan di tampilkan. Kebanyakan letak nya ada di atas menu. Atau kita bisa menambah widget baru dan paste code dibawah ini pada isi widget. sehingga bisa kita pindah-pindah sesuai keinginan.

<div class="ticker_wrap">
    <div id="beakingnews">
        <span class="wdxbreaking">News</span>
        <div id='recentpostnews'>
        </div>
    </div>
</div>

Langkah yang terakhir adalah menempatkan Javascript nya, usahakan penempatan Javascript ini berada di bawah code HTML diatas. Bisa di letakkan tepat di bawahnya atau bisa juga di atas </body> pada template Blogger anda.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://om-wan.blogspot.com/', // Ganti dengan alamat blog kamu
                  numpostx 	= 50; // Maximum Post
              $.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>';
                    $('#recentpostnews').html(skeleton);
                    
                    function tick(){
                      $('#recentpostnews li:first').slideUp( function () { $(this).appendTo($('#recentpostnews ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostnews').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostnews').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>

Silahkan ganti "url_blog" dengan alamat blog Anda.

Nah, demikian sedikit ulasan tentang Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger, semoga saja bermanfaat. Jangan lupa Like, Share, Comment dan Subscribenya... Halah... malah koyo yutuber.

"Happy Coding"