February 8, 2018

Cara Membuat Breaking News di Blog

February 8, 2018

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).

Cara Membuat Breaking News di Blog


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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

11 comments on Cara Membuat Breaking News di Blog

  1. kok ga gajalan kata2 nya

    ReplyDelete
  2. ini gda keterangan mas mau ditaro dimana ??
    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;
    }

    ReplyDelete
    Replies
    1. Itu masih menyatu dengan kode CSS di atasnya

      Delete
    2. bisa spesifik g mas, dibawah navigasi itu tepatnya dibawah kode apa ??

      Delete
    3. Kode menu tiap template berbeda, bisa <div='menu'> ... </div> bisa juga <nav id='menu'> ... </nav> dan sebagainya.

      Delete
  3. aku gagal...kode invalid terus di point no 2..mau di save invalid

    ReplyDelete
    Replies
    1. Kodenya gak lengkap kali, coba lagi, pastikan kodenya utuh

      Delete
    2. itu kode yang di post mbingungin gan..ada iklannya jdi ga tahu sampai mana yang di copas.

      Delete

Contact Form

Name

Email *

Message *