Info Mayata

Menyajikan segala informasi yang dijumpainya di dunia maya dengan ringkas

Cara Membuat Recent Comment With Avatar di Blogspot


Enggak jauh berbeda dengan tutorial sebelumnya tentang cara membuat Recent Comment bergerak, kali ini pun aku kembali share tentang cara pembuatan recent comment atau komentar terakhir yang lengkap dengan avatar. Dan seperti yang aku sebutkan diatas, kali ini terdapat perbedaan dari segi penampilannya, dimana pada recent comment kali ini akan menampilkan avatar atau foto profil si pemberi komentar. Ok, seperti apakah dan bagai manakah cara pembuatan serta hasil akhirnya? Mari kita mulai saja.

Bismillaahirrohmannirrohiim... 
Cara Membuat Recent Comment with Avatar di Blogspot

Login kedalam dasbor blog
Pilih tata letak
Pilih tambah/add a gadget
Pilih HTML
Copy paste kode di bawah ini kedalam gadget HTML

<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_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;}
.w2b_recent_comments li .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;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://ceritangeblog.googlecode.com/files/Recent%20coments%20avatar.js"></script>
<script type="text/javascript" src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=9999"></script>
</div>

 Recent Comment With Avatar di Blogspot
Keterangan: ubahlah alamat url blog yang berwarna merah atau yang bertuliskanhttp://namabloganda.blogspot.com dengan alamat url blog sobat masing-masing. Untuk mengatur lebar dan tinggi ,serta berapa jumlah komentar yang ingin ditampilkan, silahkan untuk merubah tiap-tiap nomer yang sengaja aku cetak tebal dan aku warnai dengan warna biru dalam kode script diatas tersebut.

Terakhir pilih simpan gadget dan selesai.

Recent comment with avatar sekarang sudah terpasang dalam sidebar blog sobat, very nice.!! Penampilannya kurang lebih akann terlihat persis seperti dalam gambar di bawah iini.


Comment With Avatar di Blogspot

Demikiann saja tutorial lanjutan tentang cara membuat recent comment with avatar di blogspot, aku ucapkan selamat mencoba dan Insya Allah kita jumpa lagi dalamm kesempatan yang lain. Bye-bye....

Sumber: http://cerita-ngeblog.blogspot.com/2013/07/cara-membuat-recent-comment-with-avatar.html




0 komentar:

Post a Comment

1. Berkomentarlah menggunakan kalimat yang baik dan sopan, serta sesuai topik Artikel di atas. Komentar yang tidak sesuai topik akan dihapus.

2. Tidak diperbolehkan menggunakan link hidup atau live link, link akan otomatis terhapus guna mencegah spam.

3. Sebelum bertanya, pastikan sobat sudah membaca seluruh isi Artikel.

4. Jika bertanya sesuatu, jangan lupa untuk memberi tanda centang pada Beri tahu saya atau Notify me agar sobat menerima pemberitahuan balasan melalui email.

5. Follow blog M-TAJUDDIN-NS untuk mendapatkan update Artikel terbaru dan jangan lupa tekan tombol share jika sobat merasa Artikel di atas bermanfaat.

Cara Membuat Recent Comment With Avatar di Blogspot