Ganti Icon Author Comment di Blogger Threaded CommentClick here to get more tutorials!

Icon blog author di blogger threaded comment berfungsi sebagai penanda bahwa si pembuat komentar adalah author/penulis. Bentuk icon tersebut seperti ini "Icon blog author yang digunakan di blogger threaded comment. Icon berukuran 18px x 18px dan digunakan sebagai penanda bahwa si pemberi komentar adalah author atau penulis.". Icon blog author akan terlihat di kotak komentar, tepatnya di atas teks komentar dan hanya akan muncul ketika komentar dibuat oleh author. Jika melihat icon ini mungkin beberapa orang masih "bingung" dengan maksud symbol tersebut, sehingga mungkin akan lebih menarik dan lebih mudah dipahami jika anda menggantinya dengan icon profil author sesungguhnya. Agar bisa merubah icon ini menjadi icon author, anda harus membuat sebuah icon bergambar profil anda dalam ukuran kecil sebesar 18px s/d 30p (dibatasi maksimal 30px agar tidak terlalu besar).

Cara Mengganti icon blog author dengan icon profil author

1. persiapkan image/icon profil anda dengan ukuran 18 x 18 (pixel/px) atau 30 x 30 (px).
2. Login ke BloggerAnda bisa klik disini untuk login ke blogger!
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
   

   Template › Edit HTML

   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css sesuai icon profil yang digunakan (lihat kode css di bagian bawah) di atas kode ]]></b:skin>
   • Simpan Template/Save Template
6. Selesai...
7. Buka blog di halaman posting, kemudian buat sebuah komentar untuk melihat hasilnya.

Kode CSS untuk icon 18 x 18 (px)

.comments .comments-content .icon.blog-author{
      border-radius:9px; /* untuk membuat icon bentuk bulat */
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4swtNR8WuqebmNWkM1yFmBPAJyW7pT1bLS9-KZPau5imIsQjA9Sah4eLqr-JRKSvrSnN6jWWXG-RjxF9BRrIfq3PMNo6vHDHPQXzM8o7gMArugMcdJtaFu3TLV7RpKsiaPFejN6ejfg/h120/gubhugreyot-profile-transparent-18x18.png) center no-repeat;
      background-size:18px 18px; /* menciptakan ukuran otomatis dengan nilai width=18px dan height=18px */
}

Kode CSS untuk icon 30 x 30 (px)

.comments .comments-content .icon.blog-author{
      border-radius:15px; /* untuk membuat icon bentuk bulat */
      width:30px; /* penyesuaian width dg ukuran icon profil */
      height:30px; /* penyesuaian height dg ukuran icon profil */
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKohFUdIq7K8TAlh9BtQB-ZBN1IydBiXxbGlVQVEPo-pSm4XuTok2lLr7hlshCA7YuevR_8fR_YSd4Tnu1Nzt2uIDuucvdb8DHzu6R9E7paCe_RrfkTDElLg2Eaf7ztzqj-byl4qLmgg/h120/gubhugreyot-profile-transparent-30x30.png) center no-repeat;
      background-size:30px 30px; /* menciptakan ukuran otomatis dengan nilai width=30px dan height=30px */
}

Keterangan/Catatan :

• Menggunakan icon blogger profil dengan ukuran kecil agar beban loading tidak terlalu besar.
• Icon dengan ukuran tidak terlalu besar juga bertujuan agar box komentar tidak terlalu dipenuhi dengan icon profil author.
• background-size:...px ..px; berfungsi menciptakan ukuran sesuai nilai yang digunakan secara otomatis. penggunaan kode ini untuk tindakan prevebtif ketika anda menggunakan icon dengan ukuran yang jauh lebih besar dari ukuran yang telah ditentukan.
• border-radius untuk membentuk icon bulat. Jika ingin berbentuk kotak (bujur sangkar), hapus kode border-radius:..px;
• JIka anda ingin menggunakan ukuran icon berbeda, silahkan sesuaikan, width, height dan background-size serta border-radius dengan ukuran yg baru.
• Ganti :
  - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4swtNR8WuqebmNWkM1yFmBPAJyW7pT1bLS9-KZPau5imIsQjA9Sah4eLqr-JRKSvrSnN6jWWXG-RjxF9BRrIfq3PMNo6vHDHPQXzM8o7gMArugMcdJtaFu3TLV7RpKsiaPFejN6ejfg/h120/gubhugreyot-profile-transparent-18x18.png
  dan
  - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKohFUdIq7K8TAlh9BtQB-ZBN1IydBiXxbGlVQVEPo-pSm4XuTok2lLr7hlshCA7YuevR_8fR_YSd4Tnu1Nzt2uIDuucvdb8DHzu6R9E7paCe_RrfkTDElLg2Eaf7ztzqj-byl4qLmgg/h120/gubhugreyot-profile-transparent-30x30.png
  dengan URL icon blogger profile anda