Ganti & rubah ukuran icon author comment di Blogger New Threaded Comments

Dengan merubah ukuran icon author comment pada sistem komentar baru blogger "Threaded Comment", maka anda mempunyai banyak pilihan untuk mengganti "icon aneh berbentuk bulatan hitam dengan tongkat pak tua berada di tengah-tengahnya" ini. Perubahan icon author comment di Blogger New Threaded Comments tentunya mempunyai batasan tertentu karena ukuran yang terlalu tinggi akan membuat box komentar menjadi penuh sesak serta bisa merusak tatanan xomment box. Sebaiknya anda merubah tinggi maksimal 30px. Inipun sebenarnya sudah terlalu besar. Keleluasaan yang cukup memungkinkan adalah perubahan lebar (width) karena tersedia ruang yang cukup lebar. Anda bisa manfaatkan ini untuk mengganti icon author comment ini dengan berbagai icon/image lain yang membuat blog terlihat lebih menarik.

Kode CSS-1 :

.comment-block .icon.blog-author{
      width:30px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background-size:30px auto !important;
      margin-bottom:-15px !important;
}

Keterangan :

1. Kode css di atas adalah kode dasar untuk perubahan ukuran icon author comment tanpa mengganti icon default.
2. Icon baru berukuran height=30px dan width=30px (ukuran default=18px).
3. Margin-bottom = 15px berfungsi untuk menarik icon yang sudah diperbesar agar lebih ke bawah dengan tujuan untuk keseimbangan header comment.
4. Untuk merubah ukuran icon default beserta ukurannya anda bisa gunakan kode css di bawah ini.

Kode CSS-2 :

.comment-block .icon.blog-author{
      width:35px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7CDBKXC565P7D_mS3vjeqjT0i1OxOzFJXVMdsccvp8YJ3sEyOlbfNmEtFypVI9E0B7N8GKLyGEsCdJYT1Oezv9DIHK1WS_x6yCo08xmxPjcstgNY9iz1zTTV0hdPKROoso3pbGmJBw0F/s128/butt-dance.gif) center no-repeat !important;
      background-size:35px 30px !important;
      margin-bottom:-15px !important;

}

Kode CSS-3 :

.comment-block .icon.blog-author{
      width:128px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:26px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9bXhy0udAY0JqkmnAppAnTx639zROQ1CGJDbTw5qntfoKAzoslafAFm9iExYJLRzuDYIg09KwWQ70vxcBdqelNxdT6khD_y8I6SBkNrLAZFl5d2Y3Z1dirENbZU6wnY-1GJDgghDcHs/s128/VBlogoGRfirst.gif) center no-repeat !important;
      background-size:128px 26 !important;
      margin-bottom:-10px !important;
}

Keterangan :

1. Kode CSS-2 dan CSS-3 menggunakan background imaga berbeda yang berfungsi sebagai pengganti icon author comment default blogger.
2. Kode berwarna merah adalah URL icon/image pengganti icon author comment.
3. Perhatikan pada width dan height. Nilai ini sama dengan nilai pada background-size dan nilai ini diambil dari ukuran background yang digunakan sebagai pengganti icon.
4. Margin-bottom bisa dirubah nilainya untuk penyesuaian pada header comment - autor comment.
5. Upload image pengganti icon author comment di boks posting atau di picasaweb.

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.

Catatan/Keterangan :