Rolling Headline News Blogger

Membuat Rolling Headline News Blogger - Headline News dengan menampilkan posting terbaru (recent post) dengan cara menampilkan judul posting secara bergantian (rolling) dengan tambahan sosial widget untuk menambah pertemanan.

Ibarat kita membuat posting terbaru, headline news ini berbentuk bar secara horizontal yang bisa kita tempatkan pada bagian atas blog untuk mempermudah pengunjung untuk melihat posting-posting terbaru, atau diletakan dibagian bawah dengan peletakan secara fixed (mengambang) akan lebih menarik karena headline news akan tetap terlihat walaupun layar digulung kebawah.

Untuk mengunakan headline news ini, kalian bisa copy script dibawah ini dan masukan kedalam Add Widget HTML/javascript pada menu tata letak blogger.

<div id='headline'><span class='headlinenews'>Headline</span>
<div id='headlineposts'>Loading...</div>
<ul class='social'>
<li class='fb'>
<a href='http://www.facebook.com/deZige' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/14563547686583452xxx' rel='nofollow' target='_blank' title='G+'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/deZige' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/deZige' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<style type='text/css'>
#headline {margin-top:50px;
  border-bottom: 3px solid #333;
  border-top: 3px solid #333;
  display: block;
  float: left;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  padding: 5px 30px;
  width: 100%;
}
.headlinenews {
  background:#333;
  color: #ebebeb;
  display: block;
  float: left;
  font: bold 12px/22px Tahoma;
  padding: 6px;
  margin-top: -8px;
  position: absolute;
}
#headlineposts {
  float: left;
  margin-left: 120px;
}
#headlineposts ul,#headlineposts li{
  list-style:none;
  margin:0;
  padding:0;
}
#headlineposts li a {
  background: none !important;
  color:#333 !important;
  font: bold 12px/22px Tahoma;
  text-decoration: none;
}
ul.social {
  background:#333;
  float: right;
  margin: -6px 0;
}
ul.social li {
  float:left;
  list-style: none outside none;
  border:none;
}
ul.social li a{
  background:transparent;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRb-MBJaMCrdkTL2mWhE1mBlbolyrT9_2GAVz8KVnJvjy_kQQbn5FqCQM3OSeweAL9zJ8jScg2Je-XBvW-fiqmre0CPvNGVnBEOiO6M_nRjrYVeI-IEKbG4l6DYogz1h87HugNzWoghVe/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.social li.fb a{
  background-position:0 0;
}
ul.social li.gp a{
  background-position:-96px 0;
}
ul.social li.rs a{
  background-position:-192px 0;
}
ul.social li.tw a{
  background-position:-256px 0;
}
ul.social li.fb a:hover{
  background-position:0 -32px;
}
ul.social li.gp a:hover{ 
  background-position:-96px -32px;
}
ul.social li.rs a:hover{
  background-position:-192px -32px;
}
ul.social li.tw a:hover{
  background-position:-256px -32px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://dezige-in.blogspot.com', // Ganti dengan URL kalian
numpostx     = 15; // Jumlah Post Yang Ditampilkan
$.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>';
            $('#headlineposts').html(skeleton);
            function tick(){
            $('#headlineposts li:first').slideUp( function () { $(this).appendTo($('#headlineposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#headlineposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#headlineposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Modifikasi tampilan bisa dilakukan untuk kesesuaian dengan template yang dipergunakan dengan merubah pada bagin CSS-nya, dan ubah ID sosial tiap media, baik Facebook, Twitter, Google Plus dan RSS.

Semoga bermanfaat.