Membuat Widget Recent Comment berputar

Blogger Pemula kali ini berbagi trik blogging yang berkaitan dengan membuat Widget Recent Comment berputar, artinya yang berputar bukanlah widgetnya, melainkan thumbnail gambar komentatornya yang berputar bila tersentuh ujung mouse komputer. Di dunia Internet telah banyak beredar tentang cara membuat widget recent comment ini, mulai dari yang paling sederhana sampai dengan yang rumit. Dalam artikel ini penulis ingin membagikan widget recent comment yang ringan serta tidak membebani proses loading sebuah situs atau blog. Contoh nyatanya telah penulis pergunakan untuk menghias halaman blog Blogger Pemula ini dan tidak membebani kecepatan loading blog ini yang tetap berada pada kisaran 98/100 (hasil dari Google PageSpeed Insight).

Dalam pemikiran penulis adalah, percuma saja kita memasang widget-widget blog dengan yang bagus-bagus kalau pada akhirnya pemasangan widget tersebut memperlambat proses loading blog. Maka oleh karenanya pada artikel ini penulis menyuguhkan cara membuat widget recent coment yang cukup bagus, namun tidak membebani proses loading blog.

Begini cara membuatnya, anda tinggal menambahkan widget HTML/Javascript pada bagian sidebar atau bisa juga di bagian footer, kemudian anda copykan rangkaian script berikut ini ke dalamnya.

<style type="text/css">
ul.mojoblog_recent_comments{list-style:none;margin:0;padding:0;}
.mojoblog_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.mojoblog_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;
border-radius:999px;
-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
.mojoblog_recent_comments li .avatarImage:hover{
-o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg);
border-radius:1px;
}
.mojoblog_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.mojoblog_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 40,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/8512057551/mojoblogspin.js"></script>
<script type="text/javascript" src="http://majalahblog67.blogspot.com/feeds/comments/default?alt=json&callback=mojoblog_recent_comments&max-results=9999"></script>

Angka 7 adalah merupakan jumlah komentar yang akan ditampilkan dalam widget ini, selanjutnya gantilah alamat url blog yang ada dengan alamat url blog anda sendiri. Simpan dan lihat hasilnya.

Get free daily email updates!