Recent Post Animation

#rcent_slide {
    height:255px;
}
#rcent_slide li {
    height:61.5px;
    padding:5px;
    list-style:none;
    border:solid 1px #CECECE;
    background:#F5F5F5;
}
#rcent_slide a {
    color:#00000;
}
#rcent_slide img {
    float:left;
    margin-right:14px;
    padding:1px;
    border:solid 1px #CECECE;
    width:50px;
    height:50px;
}
#rcent_slide .rcent-title_x {
    display:block;
    font-weight:bold;
    margin-bottom:4px;
    font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;
}
#rcent_slide .rcent-content_x {
    font-weight:normal;
    font-size:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function rpthumbnt(json) {
    document.write('<ul class="rcent_slide">');
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break
            }
        }
        var thumburl;
        try {
            thumburl = entry.media$thumbnail.url
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl = d
            } else thumburl = 'https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'
        }
        document.write('<li class="rcent-title_x clearfix">');
        document.write('<a href="https://tutorial-gif.1p.com/" target="_blank"><img src="' + thumburl + '"/></a>');
        document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
        if ("content" in entry) {
            var postcontent = entry.content.$t
        } else if ("summary" in entry) {
            var postcontent = entry.summary.$t
        } else var postcontent = "";
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (postcontent.length < numchars) {
            document.write('<span class="rcent-content_x">');
            document.write(postcontent);
            document.write('</span>')
        } else {
            document.write('<span class="rcent-content_x">');
            postcontent = postcontent.substring(0, numchars);
            var quoteEnd = postcontent.lastIndexOf(" ");
            postcontent = postcontent.substring(0, quoteEnd);
            document.write(postcontent + '...');
            document.write('</span>')
        }
        document.write('</li>')
    }
    document.write('</ul>')
}
function rpnewsticker() {
    last = $('ul#rcent_slide li:last').hide().remove();
    $('ul#rcent_slide').prepend(last);
    $('ul#rcent_slide li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 7000;
$(document).ready(function (){rpnewsticker();interval=setInterval(rpnewsticker, pause);});
</script>

Abaikan kode yang berwarna merah jika sudah ada dalam template kita

<div style="margin:5px -5px 0px -5px">
    <ul id="rcent_slide">
        <script>
            var numposts = 4;
            var numchars = 50;
        </script>
        <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
    </ul>
</div>

Sumber : christiantatelu.blogspot.com