Cara Membuat Breaking News Di Blog

Selamat Siang Sobat Wahid emalution, pada siang hari ini saya akan membagikan tutorial cara membuat breaking News di blog, sebenarnya tutorial ini sudah banyak bretebaran di blog-blog lain , tetapi saya akan membagikannya , karena banyak orang yang masih banyak belajar tentang Blog.

Langsung saja kita ke penjelasannya, Breaking news ini adalah widget yang berungsi menampilkan Post-post Yang telah sobat publish di blog sobat tetapi hanya dalam bentuk tulisan bergerak, atau lebih jelasnya sobat bisa melihat nya diatas post ini, bREAKING News ini saya ambil dari template Css Tuts yang di buat oleh Mba KiKi yang Blognya http://aisukablog.blogspot.com .

Langsung saja , Pertama -tama Login Ke Blogger.com

Lalu Pilih Template dan Pilih Edit HTML.

Lalu Letakkan Kode Dibawah Tepat Diatas ]]></b:skin> atau </style>

/* CSS Breaking News */
#breakingnews {width:97%;margin:10px;height:29px;line-height:25px;overflow:hidden;background:#fff;border-bottom:8px solid #f0f0f0;}
#recentpostbreaking li a {margin-left:5px;font-family:'Nova Square',Verdana,Sans-Serif;;font-weight:400;color:#333;margin-top:10px;transition:all 0.5s ease-in-out;}
#recentpostbreaking li a:hover {color:#666;}
#breakingnews .tulisbreaking {background:none repeat scroll 0 0 #f0f0f0;
color:#333;display:block;float:left;font-family:'Nova Square',Verdana,Sans-Serif;;font-weight:400;text-transform:uppercase;margin-left:0;padding:2px 7px;position:absolute;}
#recentpostbreaking {float:left;margin-left:160px;padding-top:3px}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

Dan Lanjutkan Dengan Meletakkan HTML dibawah di antara <body>..</body> , Sesuai kemauan sobat saja.

<div id='breakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
</div>

Lalu Letakkan Javascript Dibawah tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://wahid-emalution.blogspot.com/', // Replace With your Blog Url
    numpostx  = 50; // 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>';
            $('#recentpostbreaking').html(skeleton);
            // kode untuk efek pada breaking news
            function tick(){
            $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#recentpostbreaking').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Ganti Url http://wahid-emalution.blogspot.com/ Dengan Url Blog Sobat.

Supaya Breaking News nya Berjalan dengan normal , Berikan jQuery Pada Template sobat, caranya.
Letakkan jQuery Dibawah tepat diatas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Nah mudah bukan , Sekian Dari saya , Semoga Bermanaat Untuk Sobat.
Terima Kasih