DuniaKita - Cara Membuat Breaking News Ticker di Blogger. Breaking News adalah alat yang paling penting dan populer untuk blogger. Widget ini membantu pengguna atau pengunjung blog melihat update terbaru dari artikel yang Anda publikasikan atau menambahkan widget ini, Anda juga dapat dengan mudah menampilkan posting terbaru Anda.
Saya berharap tutorial ini bisa membantu mempercantik tampilan template Blog Anda. Simak langkah-langkahnya sebagai berikut :
Baca juga:
- Cara Merubah Warna Background Pada Template Blog
- Cara Membuat Tombol Shere Sosial Responsive di Blog
1: Masuk ke Dashboard Blogger Anda. Template> Edit HTML dan cari </style>
2: Salin kode CSS di bawah ini dan Paste-kan Sebelum </style>
#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#beakingnews{width:980px;margin:0 auto;line-height:35px;height:35px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FFF;background:#FD1515}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
3: Sekarang copy kode dibawah ini sebelum tag </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'letakkan URL Blog Anda disini', //ganti dengan URL Blog Anda
numpostx = 10; //Posts want to display
$.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>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'letakkan URL Blog Anda disini', //ganti dengan URL Blog Anda
numpostx = 10; //Posts want to display
$.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>
Catatan: "Letakkan URL anda disini" edit sesuai dengan url blog Anda ;).
4: Sekarang letakkan Kode HTML dibawah ini, letakkan kode di mana Anda ingin tampilkan widget Headline News. Anda juga bisa menambahkan kode di bawah ini pada Gadget HTML / Javascript.
<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<div style='clear: both;'/>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News:</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
<div style='clear: both;'/>
Note : Pada umumnya pemula akan banyak menemui kesulitan dalam menempatkan script pada templete blog, saran saya backup dulu templete Blog sebelum melakukan modifikasi atau penambahan widget headline news diatas. Jika Anda menemui kesulitan dalam menampilkan widget, silahkan tinggalkan komentar dibawah…agar saya bisa membantu memberikan solusi.
:-bd
ReplyDelete