Cara Membuat Widget Recent Comments dengan Animasi Melayang

Halo sahabat AjatShare, Kali ini saya akan posting mengenai widget Recent Comments awalnya dikodekan oleh Danish Harish dan kemudian diedit oleh banyak rekan-rekan blogger. Sama seperti mereka, saya pun telah telah malakukan perubahan dalam widget ini dan menambahkan animasi melayang-layang di dalamnya.

Demo live widget ini dapat dilihat dengan mengklik tombol di bawah ini.

LIVE DEMO - Cara Membuat Widget Recent Comments dengan Animasi Melayang

Setelah Anda telah melihat demo , untuk menambahkan widget ini di blog blogger Anda ikuti petunjuk yang diberikan di bawah ini.

Menambahkan Widget

Untuk menambahkan widget ini di blog Anda terlebih dahulu pergi ke Blog Judul → Tata Letak → Tambah Widget → HTML / JavaScript. Tambahkan kode di bawah ini diberikan.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>

<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Your Name';
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKTEdlU1NNSTZnb2c" type="text/javascript"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Tambahkan kode di atas dan ikuti petunjuk di bawah ini:

Menyiapkan Widget

Setelah menambahkan kode memeriksa konfigurasi widget.
numComments - Menunjukkan jumlah maksimum komentar untuk ditampilkan di widget.
showAvatar - Ubah ke false jika Anda ingin menyembunyikan avatar di widget.
avatarSize - Ukuran avatar di widget diukur dalam pixel.
roundAvatar - Ubah ke false jika Anda tidak ingin avatar menjadi berbentuk bulat.
karakter - Jumlah karakter untuk menunjukkan di komentar.
defaultAvatar - Gambar yang akan digunakan bila komentar tidak memiliki avatar.
adminBlog - Ganti Nama Anda dengan nama admin sehingga komentarnya dapat disembunyikan.

Setelah membuat semua perubahan jangan lupa untuk menyimpan template. Sekarang Anda dan pengunjung Anda dapat melihat widget komentar mengagumkan di dalam blog blogger Anda.