Cara membuat dan memasang breaking news di blogger
Baiklah sobat pada kesempatan ini seocips.com akan membagikan tentang bagaimana cara memasang breaking news di blog. Bahasa kerennya headline breaking news karena mungkin biasanya di pasang di atas header blog, kayak blog ini nih, sebenarnya ini sudah pernah saya bagikan di cara membuat headline breaking news di blog tapi karena masih banyak yang bingung cara pemasangnya karena kodenya saya pisah-pisah maka saya tulis kembali disini untuk mempermudahnya.

Headline News di Blog ini berfungsi untuk menampilkan beberapa berita atau konten pada Blog anda dalam satu baris dan bergantian dan biasanya yang di tampilakan adalah artikel terbaru dari blog tersebut. Mungkin sobat Blogger pernah melihat atau bahkan sudah tidak asing lagi dengan Headline News ini tidak usah jau-jauh di blog ini juga memasangnya. Umumnya breaking news ini dipasang di bagian header blog.

Cara memasang breaking News di blog

 breaking News

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template pada Blog yang diinginkan.
3. Pilih Edit HTML.
4. Cari kode HTML ]]></b:skin>, dengan tombol ctrl+F.
5. Masukan kode berikut 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; }
6. Cari kode </head>, dengan tombol ctrl+F.
7. Masukan kode berikut diatas kode </head>.
<script src='https://seocipsheadlinenews1.googlecode.com/svn/seocipsheadline1'/>
<script src='https://seocipsheadlinenews1.googlecode.com/svn/seocipsheadlinenews2'/>
8. Cari kode kode <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>, dengan tombol ctrl+F.
9. Masukan kode berikut di atas kode yang sebelumnya saya sebutkan.
<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/seocips' title='Facebook'>facebook</a></li>
          <li><a class='twix' href='http://blog.spezer.net' title='Twitter'>twitter</a></li>
          <li><a class='goex' href='http://blog.spezer.net' title='Google+'>Google+</a></li>
          <li><a class='linx' href='http://blog.spezer.net' title='Linkedin'>Linkedin</a></li>
          <li><a class='pinx' href='http://blog.spezer.net' title='Pinterest'>Pinterest</a></li>
          <li><a class='drix' href='http://blog.spezer.net' title='Dribble'>Dribble</a></li>
          <li><a class='vmex' href='http://blog.spezer.net/2014/07/cara-membuat-headline-breaking-news.html' title='Vimeo'>Vimeo</a></li>
          <li><a class='rssx' href='http://feeds.feedburner.com/Seocips' title='RSS'>RSS</a></li>
        </ul>
      </div>
   </div>
          <div class='clear'/>
Catatan!
Silahkan diganti yang perlu di ganti. Dan kode script di atas pada langkah ke 7 sebaiknya sobat backup ke hosting lain karena Google code sebentar lagi di tutup. ( baca cara upload script ke Google Drive atau cara upload script ke Google Site.

Simpan template dan lihat hasilnya.
Nah jika anda masih ingin breaking news model yang lain silahkan ambil kode headline breaking news di bawah ini, headline breaking news dibawah ini pertamakali saya lihat di Blognya Mas Andes, salah satu Bloggers profesional yang saya tahu. Tapi entah mengapa sudah tidak update artikel lagi, kayak Maskolis.

Memasang Breaking News 2

Breaking News

1. Login pada akun blogger.
2. Masuk ke Tata Letak blog dan tambahkan widget.
3. 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/seocips' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/100265901462951809989' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/seocips' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/Seocips' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://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>
Keterangan:
Tulisan warna biru ganti dengan lebar blog anda.
Ganti kode berwarna biru http://blog.spezer.net dengan URL alamat blog anda.
Tulisan yang berwarna merah ganti dengan ID masing-masing.

Sekian dan selamat mencoba. semoga tutorial cara memasang breaking news / latest post di header blog ini bermanfaat.
0 Komentar untuk "Cara memasang breaking News di blog"