Widget Recent Comment dengan Animasi

Untuk membuat widget recent comment dengan tampilan sederhana seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

Lihat Demo 
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-76<div id='recent_comments'></div>
<style type="text/css">
#recent_comments {
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    font-family: Helvetica, Arial, "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 12px;
}
#recent_comments a {
    color:#000;
    text-decoration:none;
}
#recent_comments a:hover {
    text-decoration:underline;
}
#recent_comments ol, #recent_comments li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#recent_comments li {
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    color: #333;
    display: block;
    outline: medium none;
    padding: 7px 27px 7px 8px;
    position: relative;
}
.avatar {
    display: block;
    height: 50px;
    margin-right: 8px;
    width: 50px;
    float:left;
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #EEE;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: #FF0066 #CC00FF #FF00FF #9900FF;
}
#recent_comments .title_content {
    font-weight:bold
}
#recent_comments .title_content, #recent_comments .comment_content, #recent_comments .date {
    display: block;
}
#recent_comments .comment_content, #recent_comments .date {
    margin-left: 70px;
}
#recent_comments .date {
    font-size: 80%;
    color: #666;
    clear:both
}
</style>
<script type="text/javascript">
var c = {
    blogURL: "http://obesitystrike.blogspot.com/",
    numComments: 10,
    characters: 60,
    id_containrc: "#recent_comments",
    avatarSize: 50,
    LoadingText: "Memuat...",
    Showimage: true,
    noAvatar: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKaN75y1wvgD1HbJLXjQzGWA7C7OurVe_0b2l5A10tSsEAQ7s3zSPAG0EKacbwq7qXEfdor1awaPvFEy23BRYC6ukVG47H1FuFbYN5-4JvIDns6DeUXcrfTVUY_Fx-jmzfTWmn7mKWztJ/s70/user-anonymous-icon.png",
    MonthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
    maxfeeds: 50,
    adminBlog: ""
};
</script>
<script type='text/javascript' src='http://obs-project.googlecode.com/svn/js/recent_anim.js'></script>

Opsi Lanjutan

Opsi Keterangan
blogURL Isi dengan URL blog anda contoh : http://obesitystrike.blogspot.com/, atau boleh abaikan saja
numComments Jumlah Komentar yang akan ditampilkan
characters Jumlah ringkasan komentar yang akan ditampilkan, misal 100 karakter
id_containrc ID tempat widget akan ditampilkan, default : #recent_comments
avatarSize Ukuran Avatar komentar, default : 50px
LoadingText Tulisan yang akan muncul sebelum widget berhasil dimuat (loading)
Showimage Pengaturan penampil avatar komentar, bila nilainya true, maka avatar akan tampil, begitu juga sebaliknya
noAvatar Link gambar untuk komentar yang tidak memiliki avatar, contoh : Anonim
MonthNames Nama Bulan komentar
maxfeeds Tidak jauh berbeda dengan numComments , saran saya apabila komentar yang ditampilkan sejumlah 10 feed, lebih baik atur juga maxfeeds sama dengan jumlah komentar yang ditayangkan, untuk mengurangi loading widget ini
adminBlog Apabila tidak ingin menampilkan komentar admin, isi dengan Nama admin, contoh : Rifan Hidayat