How to Change Blogger's Comment Style On Your Blog
17:30
Posted by Unknown
Hiiii Everyone I am Back With a New Cool Comment Stly For Your Blogger's Blog
This Tutorial About How we Change our Blog Comment StyleThis is done using Simple css Scripts.
For Demo

Now We Start Our Trick
- Sign in to the Blogger Account
- Select Template and click Edit HTML (Click on Proceed)
- Find ]]></b:skin> (Find using ctrl + F) [Alternate Wayt to copy css code]
- Copy any of the type of below css code just above it.
- Click on Save
Comments Style Version 1.0
.comments .comment .comment-actions a {background: none repeat scroll 0 0 #FFD99E;border: 2px solid #FFB43D;border-radius: 3px 3px 3px 3px;color: #000000;font: bold 12px arial;margin-right: 14px;padding: 3px 9px;text-decoration: none !important;text-shadow: 1px 1px 0 #FFFFFF;
}
.comments .comment-block {
background: none repeat scroll 0 0 #E2E2E2;border: 4px solid #ABABAB;border-radius: 3px 3px 3px 3px;padding: 3px 10px;
}
.continue a {background: none repeat scroll 0 0 #FFD99E;border: 2px solid #FFB43D;border-radius: 3px 3px 3px 3px;color: #000000 !important;display: inline-block !important;margin-top: 7px;padding: 3px 8px !important;text-decoration: none !important;text-shadow: 1px 1px 0 #FFFFFF;}.comment-block:hover > .comment-header {border-bottom: 2px solid #000;-moz-transition: border-color .5s ease;
}
.comment-header a {
color: #000000 !important;
}
#comments .avatar-image-container img {border: 2px solid #FFFFFF !important;border-radius: 50px 50px 50px 50px;height: 57px;max-width: 57px;
}
.comments .avatar-image-container {border: 2px solid #FFFFFF;border-radius: 34px 34px 34px 34px;box-shadow: 1px 1px 3px #ABABAB;float: left;margin-left: -40px;max-height: 60px !important;overflow: hidden;width: 60px !important;}
Comments Style Version 2.0
.comments .comment-block {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Mocf2M-F_z2Gyvi1h0kY2pojfpYw9m29LGHXJ8z5SIIVbPCU-_m7YaWrShrQ2xL_SsyA3lRkm4SFPfY8WM8qkMARrAZWCf2m2kaAnNT1wEZvg727s_OfQ7qKx3MomTXmGNEviG517lU/s1600/bg.png") repeat scroll 0 0 transparent;border: 4px solid #EAEAEA;border-radius: 3px 3px 3px 3px;box-shadow: 3px 3px 0 #D6D6D6;margin-left: 48px;padding: 3px 10px;position: relative;}#comments .avatar-image-container img {border: 2px solid #FFFFFF !important;border-radius: 50px 50px 50px 50px;height: 57px;max-width: 57px;}.comments .avatar-image-container {border: 2px solid #FFFFFF;border-radius: 34px 34px 34px 34px;box-shadow: 1px 1px 3px #ABABAB;float: left;margin-left: -40px;max-height: 60px !important;overflow: hidden;width: 60px !important;}.comment-header {border-bottom: 2px solid #F1F1F1;}.comment-block:hover > .comment-header {-moz-transition: border-color 0.5s ease 0s;border-bottom: 2px solid #000000;}.comments .comment .comment-actions a {background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;border: 2px solid #E0E0E0;border-radius: 3px 3px 3px 3px;color: #000000;font: bold 12px arial;margin-right: 14px;padding: 4px 11px !important;text-decoration: none !important;text-shadow: 1px 1px 0 #FFFFFF;}
Thx For See This Simple Post
If You Have Problem Please Comment Here
This entry was posted on October 4, 2009 at 12:14 pm, and is filed under
Blog design,
Blogger Tricks,
Blogger Widgets,
Internet Tricks
. Follow any responses to this post through RSS. You can leave a response, or trackback from your own site.
Subscribe to:
Post Comments (Atom)
30 November 2012 at 01:37
if you need any help or anysuggestion please comment here we are happy to help you