Cara Membuat Headline News (Breaking News) di Blog - Headline News(Breaking News) ini adalah widget yang fungsinya menampilkan post-post yang ada di blog kita dengan tampilan yang simpel yang mirip seperti breaking news di tv. Selain itu widget ini untuk mempermudah pengunjung untuk mencari informasi di blog kita.
Jika Anda penasaran, Anda bisa melihat contohnya di blog saya yang lagi satu. Klik tulisan demo di bawah ini
Ya kalau begitu saya akan memberikan tutorialnya sekarang. Ikuti langkah - langkahnya sebagai berikut:
1. Sign in ke blog Anda
2. Cari Tata letak kemudian klik Add Gadget
3. Klik HTML/JavaScript, kemudian masukan kode berikut dibawah ini :
<style type='text/css' scoped="scoped">
#news { background:#2C3E50; border-bottom: 5px solid #1ABC9C; border-top: 5px solid #1ABC9C; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 800px; }
.titlenews { background:#1ABC9C; color: #2C3E50; 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:#1ABC9C !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'>Breaking News</span>
<div id='ltsposts'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://nama_blog_anda.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>
CATATAN :
- Ganti tulisan yang berwarna Biru dengan URL blog Anda.
- Tulisan yang berwarna Merah bisa Anda ganti warnanya sesuai keinginan Anda.
Selesai. Itulah Cara Mudah Memasang Headline News (Breaking News) di Blog
Oh iya, jangan lupa untuk memberika Google+ dengan mengklik Tombol di bawah ini.
Salam Blogger.
Post a Comment