Dengan menambahkan script di bawah ini sobat bisa membuatnya, tentunya dengan beberapa penyesuaian yang harus dilakukan.
// http://www.dte.web.id/2012/07/animasi-blog-roll.html
var $ul = $('#elemen'),
roll = function() {
$ul.find('li').first().slideUp('slow', function() {
$(this).appendTo($(this).parent()).fadeIn();
});
}, anim = setInterval(roll, 3000);
// Pause on hover...
$ul.hover(function() {
clearInterval(anim);
}, function() {
anim = setInterval(roll, 3000);
});
Sehingga penerapannya menjadi seperti ini.................................
var title = e[i].title.$t;
content += '<li class="recent-posts"><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong></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');
.....................................
Untuk menambahkan pada blog sobat silahkan ikuti metode di bawah ini1. Pada akun blogger sobat pilih tata letak
2. Kemudian cary gadget HTML dan JavaScript kemudian tambahkan
3. Masukkan kode berikut pada formulir gadget yang ditambahkan tadi.
<div id="headline">
<stong class="headl">Headline News :</stong>
<ul id="headline-posts" />
</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://www.info-kmu.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"><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong></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>
4. Simpan
Konfigurasi Widget
Opsi | Keterangan |
---|---|
homePage | Ganti dengan URL blog Anda. |
numPosts | Digunakan untuk menentukan jumlah posting yang akan ditampilkan. |
Untuk gaya dan desain tampilannya silahkan edit CSS nya sesuai dengan keinginan dan kreasi anda