Jika anda mengunjungi sebuah blog dengan konsep berita, breaking news menjadi hal yang sering dijumpai dan pada umumnya ditempatkan di bagian atas sebuah artikel. Seperti halnya widget artikel terkait, breaking news ini saya anggap dapat meningkatkan pageview pada sebuah blog.
Mungkin ada dari kalian mau tahu cara membuatnya. Kali ini saya akan menjelaskan sedikit bagaimana cara membuat sebuah breaking news sederhana yang muncul di bagian atas artikel.
Daftar Isi
Langkah 1
Mengenali struktur HTML dari template yang digunakan. Ini sangat penting diketahui karena akan menentukan dimana breking news ini akan disimpan.
Contoh :
<body >
<div id='outer-wrapper'> <!-- Tag pembuka untuk id outer-wrapper -->
<header id='header-wrapper'> <!-- Tag pembuka untuk header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Templates (Header)' type='Header'/>
</b:section>
</header> <!-- Tag penutup untuk header -->
<nav id='nav'> <!-- Tag Pembuka untuk navigasi -->
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
</ul>
</nav> <!-- tag penutup untuk navigasi -->
<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 -->
<aside id='sidebar-wrapper'> <!-- Tag Pembuka untuk sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside> <!-- Tag Penutup untuk sidebar -->
</div> <!-- Tag penutup untuk daerah konten dan sidebar -->
<footer id='footer-wrapper'><!-- Tag pembuka untuk footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag penutup untuk footer -->
</div> <!-- Tag penutup untuk id outer-wrapper -->
</body>
Breaking News ini bisa diletakkan di bawah tag dengan id content-wrapper (line 19) atau dapat pula setelah tag dengan id main-wrapper.
Untuk mempermudah kita akan meletakkan di bawah id main-wrapper (line 21). Ini berarti nantinya widget akan muncul di atas posting dengan lebar maksimal sama dengan area posting.
Karena id dari setiap template blogspot biasanya tidak sama untuk mempermudah cari dengan cara tekan CTRL + F lalu cari id=’Blog1′ lalu kode memanggil breaking Newsnya diletakkan di atas <b:section (b:section disini pada line 22).
Jika sudah mengerti pada tahap ini kita ketahap selanjutnya.
Langkah 2
Pada tahap ini yaitu memasukkan tag html yang nantinya Breakin Newsnya akan di panggil dalam tag tersebut. Tag HTMLnya seperti ini:
<b:if cond='data:blog.pageType == "item"'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
</b:if>
Pada tag div tengan id recentpostbreaking disitulah nantinya daftar artikel breaking news akan dipanggil.
Jadi kalau seperti Contoh, maka tag kode lengkapnya jadi seperti ini:
<body >
<div id='outer-wrapper'> <!-- Tag pembuka untuk id outer-wrapper -->
<header id='header-wrapper'> <!-- Tag pembuka untuk header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Templates (Header)' type='Header'/>
</b:section>
</header> <!-- Tag penutup untuk header -->
<nav id='nav'> <!-- Tag Pembuka untuk navigasi -->
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
</ul>
</nav> <!-- tag penutup untuk navigasi -->
<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 -->
<aside id='sidebar-wrapper'> <!-- Tag Pembuka untuk sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside> <!-- Tag Penutup untuk sidebar -->
</div> <!-- Tag penutup untuk daerah konten dan sidebar -->
<footer id='footer-wrapper'><!-- Tag pembuka untuk footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag penutup untuk footer -->
</div> <!-- Tag penutup untuk id outer-wrapper -->
</body>
Langkah 3
Pada tahap ini yaitu meletakkan kode jQuery breaking news sebelum </body>. Kode jQuerynya seperti berikut:
<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://mkr-site.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>
langkah 4
Pada tahapan ini Breaking News tadi di tambahkan kode CSS agar terlihat lebih menarik. Kode ini nantinya diletakkan sebelum </head>
kodenya seperti berikut ini:
<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>
NB: Untuk mengganti warna background pada tulisan Breaking News ganti kode #008D17, warna tulisan Breaking News ganti kode #FCFCFC dan warna background judul yang muncul ganti kode #F7F7F7. Mengganti warna bisa menggunakan Hex Color Tools.
Nah begitulah cara membuat breaking news yang saya ketahui.
Semua kode dibungkus mengunakan kondisional tag hanya pada bagian posting (<b:if cond=’data:blog.pageType == "item"’>). Tag kondisonal ini bisa diganti sesuai yang anda mau.
Sumber : Mkr-site
