Cara Membuat Breaking News Menu Artikel Pada Blog Versi Net Mmc

Membuat Headline Breaking News di Blog 

Kali ini saya akan memberi contoh untuk cara membuat menu berjalan atau lebih dikenal Breaking News seperti contohnya yang ada dihalaman utama bagian atas blog saya, widget headline breaking news yang saya buat ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. untuk melihat seperti apa memasangnya ke dalam blog, langkah pertama yaitu,

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/andestyle' rel='nofollow' target='_blank' title='facebook'>

</a></li>

<li class='gp'>

<a href='https://plus.google.com/104093787575230359634' rel='nofollow' target='_blank' title='googleplus'>

</a></li>

<li class='tw'>

<a href='http://twitter.com/rizkyandes' rel='nofollow' target='_blank' title='twitter'>

</a></li>

<li class='rs'>

<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='rss'>

</a></li>

</ul>

</div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://netmmc.blogspot.co.id/', // 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 ungupx ganti dengan lebar blog anda.
Ganti http://netmmc.blogspot.co.id/ dengan URL alamat blog anda.
Tulisan yang berwarna merah ganti dengan ID masing-masing.

4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.

Untuk menentukan dimana letak widget breaking news tersebut anda bisa mengatur sesuaikan keinginan anda dengan menggeser elemen tata letak. kalau masih kurang paham juga bisa tanyakan lewat komentar dibawah.