Cara Membuat Widget Headline News , sudah sangat banyak cara untuk membuat Widget ini. Widget ini juga sudah di sediakan di feedburner. Saya tidak mau ketinggalan untuk memberikan kepada sobat-sobat tutorial Membuat Wiget Headline News. Berikut tutorialnya :
1. Loginkan akun blogger sobat di blogger.com
2. Pilih " Tata Letak " kemudian klik " Tambah Gadget "
3. Setelah itu cari " HTML/Javascript " kemudian masukkan dibawah ini pada kolom " Konten "
<div id="headline">
<stong class="headl">Headline News :</stong>
<ul id="headline-posts" />
</ul></div>
<style>
#headline {
height: 20px;
clear: both;
}
.headl {
float:left
}
#headline-posts {
display: inline;
position: absolute;
margin: 0;
height: 20px;
overflow: hidden;
}
#headline-posts li {
list-style:none;
overflow:hidden;
text-decoration:none;
margin: 0;
}
</style>
<script type="text/javascript">
// Headline news widget for Blogger
// Dikombinasikan dengan Animasi Blogroll http://www.dte.web.id/2012/07/animasi-blog-roll.html
// Author: yOu w4hyOu
// https://plus.google.com/106933633716411881896/about
var homePage = "http://kosongsembilan-09.blogspot.com/",
numPosts = 5
function headlinePosts(a) {
if (document.getElementById("headline-posts")) {
var e = a.feed.entry,
title, link, content = "",
ct = document.getElementById("headline-posts");
for (var i = 0; i < numPosts; i++) {
for (var j = 0; j < numPosts; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t;
content += '<li class="recent-posts"><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></li>'
}
ct.innerHTML = content
}
}
var $ul = $('#headline-posts'),
roll = function () {
$ul.find('li').first().slideUp('slow', function () {
$(this).appendTo($(this).parent()).fadeIn();
});
}, anim = setInterval(roll, 3000);
$ul.hover(function () {
clearInterval(anim);
}, function () {
anim = setInterval(roll, 3000);
});
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=headlinePosts';
document.getElementsByTagName('head')[0].appendChild(you_script);
</script>
Keterangan kode :
- homePage : Ganti dengan URL sobat
- numPosts : Digunakan untuk menentukan jumlah postingan yang akan ditampilkan
Sekian tutorial Cara Membuat Widget Headline News. Semoga artikel ini bermanfaat.
Terima kasih telah membaca artikel tentang Cara Membuat Widget Headline News di blog 09Blogspot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
Silahkan anda berikan kritik atau saran yang bersifat membangun agar Blog ini dapat lebih baik lagi . Terima Kasih