Customize Author's Comments Background In Blogger Comments Box

Wow, I'm back in my computer's table and now it's time make another quality post that was keep bothering me anytime someone comment my posts and made some replies on it. Want to ask what is it, that is  how to make my comments background different from my readers' comments. But thank God because I succeeded in customizing it and I will also acknowledge yoboy for the initial codes and I add it with another css to make it more attractive. So, let us go with the process!

Customize Author's Comments In Blogger Comments Box

Step 1. Go to blogger Dashboard >> Template >> Edit HTML
Step 2.  Look for this tag </body> or (control F to be easier),
Step 3. Just above or before that tag place the code below,

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background' url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Step 4. Look for the tag ]]></b:skin>, and just above it paste the CSS code below:

.comments .comments-content .icon.blog-author {

position: absolute;

top: -2px;

right: -2px;

margin: 0;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png);

width: 36px;

height: 36px;

}

Note: Your URL image (bolded pink text) must match with each other 

Please use our color code generator to select a wide variety of hexadecimal colors

Short Customization (Optional):
A.  Border

• Change 1px to increase or decrease the border size of author's comment box. Greater value increases the border size and low value decreases the border also.
• Replace solid with your own border styles. 
• Replace FFA500 to change the border color of your (author's) comment box 

B. Background

•  If you want to use your own background image, replace  the default background  url image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVgLxR_qCdlRknDsYjoE_QQV-v_-SZR795PuZHribqmstTpAITJ8sEl2HJWlzeuVirzjR29SGWBvJBWkMQhmFiMi80RmjZb9u1q3ys6gZlOHYPvQoDJLWf9opM2gBu5T00vgWybYFjZI/s1600/comment-author.png  with your's.
• You may replace the background image above with image URL below:
  
  
  
  
  

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXjsOmc7Gm41PEfrClJmEE36UU4gDT2qSdjyfAtm_EFtcaam9Ef9jO_403PtCBZurzLsA0-ErqvYrxXsN5BKY88eisWZdGE92I7ju0IHJdlalMIFrLvMNjl7fow2E64bymoridTBnFaQ/s1600/author-+comment.png

  
  For white/transparent background
  
  

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4kKyIUmLxNwA2KPsKBp1mTtgyzc-uLBO9fGZOF1bTTuZkHtb-HqRmnxlNrftgGnGY4mBjQgyacC9aNwMzS9TI1LctBaiE0kbZw0ZNiaC-D9hVEc-cEs6x30q7cy-eGLlyw1i1ULhF8o/s1600/white-author's+comment.png

  
  
  
  
  

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2HaYcWSKGfLJbs3f3pS_eXiAQHjp6RzNn42C1oW6a7zbbrBzDpLd9iUvLoqs3Cd-i-SWD2Zz5xa9fHhKZmQnObSwb1KW2WGyvum8QHa13ijRUt-XbhhmkBxufsYiGKxauhsVsTE17js/s1600/author+comment+box.png

  

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGdczmIIazxGGx1Wre8ylu4xkeKbJU7_fjya9DK1RPoj8weoswaIIHSg-fKn6aNO9Sd7SdXaRLuPk_Wmigcwb7iGRr33eZ5rSCuD5M6hZump8yk0vU7zvFLE3pomclmswPnvrQH-92Hc/s1600/author+comment+box+2.png

C. Font Color and Font Size

• Replace 444444 with your color preference, and change 12px to adjust its font size.

Step 5. Save your template and visit your new comment box background. Enjoy!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook