cara mudah membuat headline breaking news di blog(blogger)

Hello sahabat kuyalamban, salam hangat dari kami semoga anda merasa nyaman berada di blog ini.
seperti pada judul di atas kali ini kita akan membuat headline breaking news bergerak di blog kita.

awalnya saya tahu hal ini ketika saya menggunakan wordpress, pada saat itu theme yang saya gunakan ada headline breakingnews nya, dan saya penasaran bagaimana cara membuat breakingnews di blogger, akhirnya saya melakukan searching dan menemukan dua cara untuk membuat headline breaking news.

cara yang pertama kita harus melakukan penAeditan pada HTML blog kita, mulai dari meletakan kode di atas </head> sampai merubah gaya di [[><b:skin>, saya kira cara itu akan cukup rumit, belum lagi resiko jika salah pengeditan pada HTML blog kita.

sehingga akhirnya saya memutuskan untuk membuat headline/tagline breakingnews ini dengan cara yang paling mudah yaitu dengan meletakan kode pada tataletak dengan penambahan widget.

mengapa saya lebih memilih cara ini???

 karena dengan cara ini kita hanya perlu melakukan beberapa langkah saja, ditambah jika ada kesalahan dan kita sudah bosen memakainya kita hanya perlu menghapus widgetnya saja, tanpa harus susah mencarinya di menu edit html

baiklah kita langsung saja ke cara membuatnya:
cara membuat headline breakingnews di blog

1. masuk dasbor blog anda
2. pilih TATA LETAK
3. TAMBAH WIDGET
4 pilih HTML/JAVASCRIPT
5. Masukan kode berikut

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtlH-VcJiFmBR68GB_HSG4yX8Zml6GE0uZgoX9vEeCcE6MYUflNmJlKrJ0n6wSF1oJmQW-VBAoDSV8mFGb2ZQWTWE7e_JptKwPSWg6fOowJpDfbhr3khKFsvKKw2qoeDuBdnKeEoyBZaq/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/FB ANDA' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/ID GOOGLE PLUS ANDA' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/twet anda' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/rss feed anda' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.kuyalamban.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>';
            $('#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> 

silahkan ganti tulisan berwarna selain HITAM di atas sesuai keinginan anda,
semoga tutorial singkat ini bermanfaat.

salam hangat
admin kuyalamban:)

Tweet