Headline News ini berfungsi untuk menampilkan beberapa berita atau konten pada Blog dalam satu baris dan bergantian. Biasanya yang di tampilkan adalah artikel terbaru dari blog tersebut. Headline breaking news ini biasanya atau lebih sering kita temui di pasang di bagian atas atau header suatu blog.

Mungkin kamu pernah melihat atau bahkan sudah tidak asing lagi dengan Headline News ini, Disini saya mempunya dua model yang berbeda. Silahkan kamu pilih saja yang mana yang sesuai dengan template yang kamu gunakan. Ok, berikut tutorialnya.

Headline Breaking News V.1


 breaking News
Headline Breaking News V.1

1. Masuk ke menu Template >> Edit Html
2. Selanjutnya, letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>.

#headlinenews { position:relative;background:#343434; display: block;border-top:3px solid #FF6600; height: 33px; line-height: 33px; overflow: hidden;margin:0 auto;padding: 0px;width: 100%;}
#news { float: left; margin-left: 120px; }
#news a { background: none !important; color:#fff !important; font: bold 11px/33px Arial; text-decoration: none; }
.titlenews { background:#FF6600; color: #fff; display: block; float: left; font: bold 12px/33px Arial; padding: 9px; margin-top: -10px; position: absolute; }
#socialicon { float:right; width:230px; padding:5px 0; }
#socialicon ul,#socialicon li { padding:0; margin:0; list-style:none; }
#socialicon li { float:left; margin:0 2px; }
#socialicon a { display:block; text-indent:-9999px; width:24px; height:24px; background-image:url(http://3.bp.blogspot.com/-7N7Yc9pfpq4/UZWTCyT3cLI/AAAAAAAAARk/v8jfsiRfs9c/s1600/soicon.png); background-position:-1px 0; background-repeat:no-repeat; position:relative; }
#socialicon a:active { top:1px; }
#socialicon .fbx { background-position:-1px 0; }
#socialicon .twix { background-position:-27px 0; }
#socialicon .goex { background-position:-53px 0; }
#socialicon .linx { background-position:-131px; }
#socialicon .pinx { background-position:-79px 0; }
#socialicon .drix { background-position:-157px; }
#socialicon .vmex { background-position:-183px 0; }
#socialicon .rssx { background-position:-105px; }

3. Selanjutnya, letakan kode berikut diatas kode </head>.

<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline1.js'/>
<script src='https://cdn.rawgit.com/Brando07/share/Updte/seocips-headline2.js'/>

4. Letakan kode dibawah ini diatas kode <div id='header'>  ( atau <div id='header-wrapper'> atau <div id='header-outer'> ).

<div id='headlinenews'>
    <span class='titlenews'>Latest Post</span>
  <div id='news'>
 <script type='text/javascript'>
 var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
 cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://blog.spezer.net/feeds/posts/default&quot;)
 cssfeed.displayoptions(&quot;date&quot;)
 cssfeed.setentrycontainer(&quot;span&quot;)
 cssfeed.filterfeed(10, &quot;date&quot;)
 cssfeed.entries_per_page(1)
 cssfeed.init()
 </script>
   </div>
<div id='socialicon'>
        <ul>
          <li><a class='fbx' href='http://www.facebook.com/spezernet' title='Facebook'>facebook</a></li>
          <li><a class='twix' href='https://blog.spezer.net/' title='Twitter'>twitter</a></li>
          <li><a class='goex' href='https://blog.spezer.net/' title='Google+'>Google+</a></li>
          <li><a class='linx' href='https://blog.spezer.net/' title='Linkedin'>Linkedin</a></li>
          <li><a class='pinx' href='https://blog.spezer.net/' title='Pinterest'>Pinterest</a></li>
          <li><a class='drix' href='https://blog.spezer.net/' title='Dribble'>Dribble</a></li>
          <li><a class='vmex' href='https://blog.spezer.net/' title='Vimeo'>Vimeo</a></li>
          <li><a class='rssx' href='http://feeds.feedburner.com/spezer' title='RSS'>RSS</a></li>
        </ul>
      </div>
   </div>
          <div class='clear'/>

5. Simpan template dan lihat hasilnya.

Headline Breaking News V.2


Nah jika kamu masih ingin mencoba headline breaking news model yang lain, kamu dapat mencoba headline breaking news di bawah ini.

Breaking News
Headline Breaking News V.2

1. Masuk ke Tata Letak blog dan tambahkan widget.
2. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript.

<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/spezernet' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/u/0/116597745406377507412' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/spezer' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/spezer' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://blog.spezer.net/', // 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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Tulisan warna biru ganti dengan lebar template blog kamu, Ganti kode berwarna dengan url/link-mu.

Sekian, semoga bermanfaat.
0 Komentar untuk "Cara Mudah Membuat Headline Breaking News di Blog"