Monday, January 5, 2015

Membuat Breaking News Di Blog

Headline Breaking News Blogger
Muiz-Techno
mungkin bagi anda yang suka nonton berita sudah tak asing lagi mendengar kata breaking news !!!
breaking news adalah berita berjalan yang ada dibawah layar atau diatas layar!!
tapi di blog kita dapat jumpai breaking news itu .. yaitu trik membuat recent post seperti breaking news televisi

untuk melihat demonya anda bisa mengunjungi situs ini namun berbeda karena di situs ini menggunakan script PHP Sedangkan di blog menggunakan script HTML.

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/saipul.muiz' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/111956293247531640879' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/zaipulmuiz' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/Muiz-Techno' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://muiztech.blogspot.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>
Keterangan:
Tulisan warna biru ganti dengan lebar blog anda.
Ganti http://muiztech.blogspot.com dengan URL alamat blog anda.
Tulisan yang berwarna merah ganti dengan ID masing-masing.
warna ungu ganti dengan tulisan yang sobat inginkan

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

Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.
Terima kasih atas kunjungannya silahkan berkomentar bila ada yang kurang dipahami!!!

Anda Sedang Membaca Artikel Tentang Membuat Breaking News Di Blog Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/01/membuat-breaking-news-di-blog.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner