Cara Membuat Breaking News Di Blog

Share Pengalaman - Halo sobat setia pengunjung share pengalaman, Pada artikel kali ini saya akan berbagi sebuah tutorial cara membuat breaking news di blog dengan mudah akan saya berikan tutorialnya kepada semua teman-teman.

Sebelum kita lanjut pada langkah-langkah cara membuat breaking news lebih mendalam lagi, saya akan memberikan ilusi dari tampilan breaking news yang sedang kita bahas di dalam artikel ini.

Breaking news adalah sebuah kata dari bahasa inggris yang bisa diartikan ke dalam bahasa indonesia berita terbaru. Breaking news yang akan kita buat nantinya akan tampil di bagian atas tampilan blog, kalian juga bisa mengaturnya ditempat lain, tapi saya sarankan di atas tampilan pertama yang mudah untuk dilihat oleh para pengunjun, maka mereka juga akan mengetahui update artikel terbaru dari blog tersebut dengan efek judul artikel tampilan slow berjalan-jalan.

Jika memang sudah mengenal apa itu breaking news, langsung saja kita masuk pada tahap cara membuat breaking news di blog, simak langka-langkah di bawah ini.

Cara Membuat Breaking News Di Blog

• Pertama-tama silahkan masuk ke halaman www.blogger.com
• Selanjutnya silahkan klik menu Tema > Edit Html.
• Silahkan cari kode </head> dan pastekan kode di bawah ini di bagian atas kode </head>.

<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #1194f2; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -2px 0px 0px 150px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !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/AVvXsEgnpuZ5AXSa7CB3yXyYmYfyDtuyw9ouNbY4FN0GF1hVjNmZszY8dWz6SmgK8103rKAUjtRp2Yo5ZONltVyGN2lARO9NLy75lfS34ZKMEv35x0njQrY714_3L-c-AGwkM0QPpN95_DDK7NwI/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'><i aria-hidden='true' class='fa fa-newspaper-o fa-lg'/> BREAKING <span style='color:#ff4f4f;'>NEWS</span> :</span>
<div id='ltsposts'>
Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.nama blog anda.com/', // Ganti dengan URL blog agan
numpostx     = 10;             // Maximum berita yang akan muncul
$.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 () }, 3000); // kecepatan yang diinginkan
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

• Selanjutnya silahkan klik Simpan Templeat dan langsung lihat hasilnya.

Demikianlah artikel cara membuat breaking news di blog semoga bisa menjadi bermafaat, sekian dan terimakasih.