Cara Membuat Breaking News di Blog

Baca Juga

Cara Membuat Breaking News di Blog - Recent Post berupa Running Text.

Breaking News atau Headline News yaitu widget blog berisi posting terbaru yang tampil di bagian header, di atas logo atau di bawah menu. Desainnya seperti running text (teks berjalan).

Breaking News ini biasanya dipasang di template blog magazine style atau blog berita. CB sih tidak menganjurkan pasang. Soalnya, selain hanya bikin loding blog jadi berat, juga kayaknya gak penting dipasang.

Namun, masih aja ada blogger yang mau pasang, seperti klien layanan premium CB. Maka, jaga-jaga ada yang mau pasang lagi, CB simpan kodenya berikut ini plus cara memasangnya di blog Blogger atau Blogspot.

Cara Membuat Breaking News di Blog

Berikut ini Cara Membuat Breaking News di Blog - Recent Post berupa Running Text.

1. Klik Tema > Edit HTML
2. Pasang kode.

Kode CSS:
Pasang kode CSS berikut ini di atas kode ]]></b:skin>

#breakingnews {
  float: left;
  height: 40px;
  line-height: 42px;
  overflow: hidden;
  width: 100%;
  background: #eee;
  box-shadow: 0 2px 7px -3px #000;
  -ms-box-shadow: 0 2px 7px -3px #000;
  -moz-box-shadow: 0 2px 7px -3px #000;
  -o-box-shadow: 0 2px 7px -3px #000;
}
#recentpostbreaking li a {
color:#949494;
font-family: sans-serif;
font-weight: bold;
}
#recentpostbreaking li a:hover {
color:#e91b23;
}
 #breakingnews .tulisbreaking {
background:#e91b23;
}
 #breakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#breakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtp4oSjMcpW0NfQ5i7p0qPBIdH_r5Clb4sm3oMMmKS-gqA_mPvQz8LOVg02zFyl4yJuhU_4G9gGtO3v6afwrVJvrL4E5p1gh5JuQMAhoMkz4ReDtTD_dABJZEjztCa7X6l3mNONM4bbZ2T/s1600/ticker-bg.png) no-repeat right center;
  color: #fff;
  float: left;
  font: 700 20px/20px 'Oswald',sans-serif;
  max-width: 155px;
  height: 20px;
  padding: 10px 25px 10px 20px;
  text-transform: uppercase;
}
#recentpostbreaking {
    float: left;
    margin-left: 155px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
div#fontoo {
width: 100%;
display: block;
line-height: 0;
overflow: hidden;
border-bottom: 1px solid #dfdfdf;
}
div#fontoo p {
margin: 0px 30px;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
color: #333;
font-family: 'Ubuntu', Arial, Lucida, sans-serif;
}

Kode HTML:
Pasang di posisi di mana Breakingnews ini mau ditampilkan. Biasanya di bawah kode menu navigasi.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='fontoo section' id='fontoo'>
   <div id='breakingnews'>
            <span class='tulisbreaking'>
              DON&#39;T MISS
            </span>
            <div id='recentpostbreaking'>
              Loading...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://contohblognih.blogspot.com/', // Replace With your Blog Url
                  numpostx = 20; // 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>';
                    $('#recentpostbreaking').html(skeleton);
                    // kode untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>
      </div>
      </b:if>

3. Ganti alamat blognya.
4. Pastikan ada link ke kode jQuery seperti ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Jika belum ada, silakan tambahkan. 

5. Save Template!

Cara Membuat Breaking News di Blog - Recent Post berupa Running Text. Good Luck & Happy Blogging! (www.contohblog.com).*