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  box


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("http://3.bp.blogspot.com/-zOV4vcUcaVo/UZhw48uI0MI/AAAAAAAAAuo/WL5euqHm-wk/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(http://3.bp.blogspot.com/-zOV4vcUcaVo/UZhw48uI0MI/AAAAAAAAAuo/WL5euqHm-wk/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 http://3.bp.blogspot.com/-zOV4vcUcaVo/UZhw48uI0MI/AAAAAAAAAuo/WL5euqHm-wk/s1600/comment-author.png  with your's.
  • You may replace the background image above with image URL below:


    http://1.bp.blogspot.com/-AD8o3QP4LBE/UZjb-VjNiEI/AAAAAAAAAwg/gRtvasuIsa8/s1600/author-+comment.png
    For white/transparent background

    http://1.bp.blogspot.com/-gu6bAlPPE6I/UZjfyRpHWRI/AAAAAAAAAw8/3OiI5N0WsXc/s1600/white-author's+comment.png


    http://4.bp.blogspot.com/-FrMCKIejxr8/UeZuPvNXbhI/AAAAAAAABSM/vbqf8rol_RE/s1600/author+comment+box.png
    http://1.bp.blogspot.com/-3gXZR_kVp10/UeZxAFmVJkI/AAAAAAAABSc/wjH6HqG4aME/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:
tilt  hover effect
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


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. In this world, it is too common for people to search for someone to lose themselves in. But I am already lost. I will look for someone to find myself in. See the link below for more info.


    #lost
    www.mocsbar.com

    ReplyDelete
  2. Informative and helpful article you got here. Your effort is really appreciated keep sharing with this kind of setup.

    www.triciajoy.com

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...