C
oba Anda Lihat di atas Judul Artikel postingan Blog ini, sekarang sudah ada widget Breaking News yang nempel di sana dengan gaya drop up. Widget ini saya dapat dari Blog-nya mkr-site.blogspot.com. Lumayan bisa menghiasi Blog dan sekaligus sebagai pemancing artikel lain, agar bisa dilihat secara langsung oleh pengunjung, sehingga diharapkan bisa meningkatkan pageview halaman Blog kita.
Penasaran ingin mencoba juga di Blog Anda, silakan ikuti petunjung di Bawah ini :
1). Masuk ke template >> Edit HTML, cari dan temukan kode ini id='Blog1'
Posisi kode-nya seperti dibawah ini :
<div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar -->
<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> <!-- Tag Penutup untuk daerah posting dan komentar -->
2). Salin kode di bawah ini dan letakkan di atas kode <b:section class='main' id='main' showaddelement='no'>
<b:if cond='data:blog.pageType == "item"'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
</b:if>
Note : di atas itu adalah kode pemanggil Breaking news-nya, disitulah Breaking News akan muncul di Blog.
3). Nanti tampilan kode lengkapnya jadi seperti ini :
<div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar -->
<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar -->
<b:if cond='data:blog.pageType == "item"'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
</b:if>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> <!-- Tag Penutup untuk daerah posting dan komentar -->
4). Cari kode </body> dan letakkan kode jQuery breaking news di bawah ini di atas kode </body>:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'URL_blog disini', // alamat blogmu contoh http://berbagitipsblogger.blogspot.com
numpostx = 10; // Jumlah artikel yang di tampilkan
$.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>
</b:if>
Note :
Ganti 'URL_blog disini' dengan Alamat URL blog Anda.
5). Selanjutnya cari kode </head> dan letakkan kode CSS di bawah ini tepat di atasnya.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#beakingnews{line-height:25px;height:25px;background:#F7F7F7;overflow:hidden}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#008D17}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
</b:if>
6). Simpan template Anda. Selesai.
Untuk informasi lengkapnya bisa kunjungi langsung web pembuat tutorial : http://mkr-site.blogspot.co.id/2013/01/membuat-breaking-news-blogspot.html
No comments:
Post a Comment