Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

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.

Cara Membuat Breaking News di Blog

Kode CSS:
Dipasang 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(http://3.bp.blogspot.com/-xD-8rredGa0/VYhMCriYg2I/AAAAAAAAF1U/8-DoLAjUM04/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, misalnya 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. Save Template!

Demikian Cara Membuat Breaking News di Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Cara Membuat Breaking News di Blog | Labels: Desain Blog

1 komentar on Cara Membuat Breaking News di Blog

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *