Cara Membuat Widget Komentar Terbaru dengan Avatar (Thumbnail) di Blogspot

Tomata LikuangTomata Likuang November 09, 2018
Blogger.com-Apakah Anda ingin menambahkan widget komentar baru-baru ini ke blog blogger Anda? Baru-baru ini, salah satu pembaca kami meminta kami untuk meliput artikel tentang menambahkan widget komentar baru yang indah untuk blog Blogspot. Itulah mengapa dalam artikel ini saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah menambahkan widget komentar terbaru yang elegan yang juga menunjukkan thumbnail gravatar dari komentator. Bukankah ini keren?.

Cara Membuat Widget Recent Comments dengan Avatar (Thumbnail) di Blogspot

Cara Menambahkan Widget Komentar Terbaru dengan Gambar Avatar (Thumbnail) di Blogspot


Mungkin ada alasan khusus mengapa Anda ingin menambahkan widget ini ke blog Anda tetapi saya telah mencantumkan di bawah kebutuhan utama untuk menambahkan widget klasik ini.

  1. Orang menggunakan untuk menambahkan widget ini sebagian besar untuk membawa lebih terlihat profesional ke blog mereka.
  2. Lihat komentar terbaru di blog mereka dan memoderasinya dengan mudah.


Bagaimana Cara Menambahkan Widget Komentar Terbaru dengan Avatar di Blog Blogspot?


Cukup ikuti langkah-langkah sederhana di bawah ini untuk menambahkan widget komentar terbaru yang cantik ke blog blogger Anda.


  1. Buka Dasbor Blogger > Layout (Tata Letak).
  2. Klik Tambah Gadget > HTML / JavaScript.
  3. Salin dan Tempel kode yang diberikan di bawah ini ke dalam kotak konten.
    <style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:blonotenoteck;clear:both;overflow:hidden;list-style:none;}    .latest_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:80px;-moz-border-radius:80px;border-radius:80px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;line-height: 1.0;}.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 80,    showMorelink    = false,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/114177022121/bbeginner-recent-comments.js"></script><script src="http://url.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>
  4. Sekarang ubah url.blogspot.com yang disorot dengan URL blog Anda sendiri.

Kustomisasi Lebih Lanjut (Opsional):



  1. Untuk mengubah jumlah komentar, temukan max-results=5 dan ubah 5 ke angka yang diinginkan.
  2. Jika Anda tidak ingin menampilkan avatar maka temukan kode ini showAvatar = true dan ubah true menjadi false.
  3. Untuk mengubah ukuran avatar temukan kode ini code avatarSize = 60 dan ubah sesuai piksel yang Anda inginkan.
  4. Jika Anda tidak ingin menampilkan avatar berbentuk bulat maka temukan kode ini roundAvatar = true dan ubah true menjadi false.
  5. Untuk mengatur jumlah karakter maksimum, temukan karakter kode ini characters = 80 dan ubah 80 ke jumlah karakter yang ingin Anda tampilkan.
  6. Untuk menampilkan lebih banyak tautan di komentar, temukan showMorelink = false dan ganti false dengan true. Ini akan menampilkan tautan baca lebih banyak ke komentar khusus itu.
  7. Jika Anda mengaktifkan menunjukkan lebih banyak nilai tautan, maka Anda dapat mengubah teks yang menunjukkan lebih banyak tautan. Temukan kode ini moreLinktext = "More »"
  8. Untuk mengubah gambar default avatar, temukan kode ini defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" jika tidak, biarkan seperti itu.
  9. Sekarang simpan widget Anda dan Anda sudah selesai.

Demikian dan selamat mencoba :)
Tags