Cara Membuat Headline Breaking News di Blog

Cara Membuat Headline Breaking News di Blog - Widget headline breaking news ini hampir sama dengan widget recent post, namun headline breaking news ini berbentuk horizontal seperti navigasi yang biasa dipasang diatas header.

Sebenarnya widget ini saya temukan di blog mas andes, jadi mohon maaf jika saya pinjam kodennya ya mas andes.. hehe..
Kembali ke topik, widget headline breaking news ini akan memunculkan artikel terbaru blog anda. Widget ini juga dilengkapi menu social media yang isinnya facebook, twitter, google pluss dan rss feeds. Berikut penampakan headline breaking news

Atau demo gif nya

Berminat untuk memasangnya? mari ikuti tutorial saya kali ini tentang cara membuat headline breaking news di blog.

Membuat Headline Breaking News di Blog :

Berikut kode-kode dari widget ini (Bisa disimpan di notepad dahulu) :

CSS :

#news { background:#26A65B; 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: 940px; }
.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/AVvXsEiKTvGfR5S38caukBVhP5zYW2YxY7vOlRwVJsPWI_z0vzZ2vgDHk4kKgAmr7_iQS-0dguCL0aMWXjdtOULdSpqRqOpKvvl4OjFLzoCdJNdc0aZMWvrHEwjJ69UJbgilPkJYBW85dkdTR89J/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}

Keterangan :

• width: 940px : sesuaikan dengan lebar blog anda.

Javascript :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.mas-aldi.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 :

• http://www.mas-aldi.com : ganti dengan link blog anda.

HTML :

<div id='news'><span class='titlenews'>Latest News!</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/aldi.master.seller' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/+AldiAllesandro' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/AldiAllesandro' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/MasAldi' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

Keterangan :

• Ganti link social media-nya dengan link social media anda.

Nah, sekarang tinggal pemasangannya ditemplate blog
1. Seperti biasa, pergi ke dasbor blogger -> pilih menu template -> lalu klik edit html.
2. Masukkan kode CSS tadi di atas kode ]]></b:skin> atau </style>
3. Masukkan kode Javascript tadi diatas kode </body>
4. Nah sekarang tinggal menaruh kode HTML, untuk kode ini terserah anda mau dipasang dimana. Jika ingin memasang diatas blog, bisa ditaruh dibawah kode <div id='wrapper'> atau </head>

Semoga bermanfaat :)

Sumber Kode : http://mas-andes.blogspot.com/2013/10/cara-membuat-headline-breaking-news-blog.html

Cara Membuat Headline Breaking News di Blog 2015-01-02T14:38:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous