Unique Modified Threaded Commenting System V1 for Blogger Templates

Unique Modified Threaded Commenting System V1 for Blogger Templates We have seen many templates with built-in threaded comment system. But some templates has very simple commenting system that looks ordinary. So to beautifying your threaded commenting system I am just sharing a piece of code that will help to make your commenting system awesome. You can see BloggerSpice commenting system that I have modified. It is just like spiceupyourblog commenting system. And I have modified it with different and stylish looks. Hope you will like it. Ok to change your default threaded commenting system just follow the below steps. Live Demo Step 1Log in to your Blogger Account and Go to yourBlogger Dashboard Step 2Now click on - Template - Edit HTML Step 3Now Find this code]]/b:skinby pressingCtrl+F Step 4Copy the below code and Paste it Before/above]]/b:skin /*Threaded Comment Widget By www.bloggerspice.com*/ #comments { padding:10px; } #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4{background:#1aa1e2;} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0} h4#comment-post-message { display:none; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height:1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .comment .avatar-image-container { border:1px solid #B22400;-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; max-height:60px; margin-top:-10px; width:60px; position:relative; z-index:70; border:4px double #1aa1e2;-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); } .comments .comments-content { padding:5px; font-size:11px; } .comment .comment-block { margin-left:75px !important; min-height:84px; text-align:left; } .comment .comment-header { background:none repeat scroll 0 0 #80C8FE;-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color:#333; font-size:12px; font-weight:normal; margin-left:60px; } .comment .comment-header a { color:#fff !important; text-decoration:none; } .comment .comment-content { background:none repeat scroll 0 0 #BFE3FE; border-bottom:2px solid #1aa1e2; font-size:12px; margin:0 0 30px; padding:5px 5px 10px 10px; text-align:left; } .comment .comment-actions a { color:#860000; display:inline-block; line-height:1; margin:0 3px; padding:3px 6px !important; text-decoration:none; } .comment-header cite { background:none repeat scroll 0 0 #E60066;-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color:#fff;border: 2px solid white; padding:2px 5px; position:relative; z-index:99; margin-left:-20px; } cite.blog-author { background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .icon.blog-author { display:none !important; background:url(") no-repeat scroll 0 0; margin-left:90px; width:60px !important; height:60px !important; position:absolute; right:5px; bottom:5px; top:10px; } .comment .comment-header { color:#333; font-size:12px; font-weight:bold; } .comment .avatar-image-container img { border:medium none !important; height:60px !important; width:60px !important; max-height:60px !important; max-width:60px !important; } .comment .comment-actions a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background:none repeat scroll 0 0 #1aa1e2 !important; color:#FFF !important; display:inline-block !important; line-height:1 !important; margin-top:-10px !important; margin-right:2px !important; padding:3px 6px !important; text-decoration:none !important; font-size:14px; } .comment .comment-actions a:hover { background:#860000 !important; text-decoration:none !important; } .comments { font-size:1em; color:#000; } .comments .continue a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background:none repeat scroll 0 0 #FF3300 !important; color:#FFF !important; display:inline !important; line-height:1 !important; margin-top:10px !important; margin-right:2px !important; padding:3px 6px !important; font-size:13px; } .comments .continue a:hover { background:#860000 !important; color:#FFF; text-decoration:none; } .item-control { display:inline-block; } .comments .continue { border-top:2px solid transparent !important; } #comment-editor { width:103% !important; } .comment-form { width:100%; max-width:100%; } .comments .thread-toggle { margin-bottom:10px; } .comments .comment-thread.inline-thread .comment { margin:0 0 5px 15%; } Step 5NowSave the templates and check your templates new stylish commenting system. Customization: Change all Highlighted color from Above according to your own taste. Get the color code from Here. #BFE3FE; Change this color code to change the comment body color. #80C8FEChange this for time and date holder background color. #E60066 Change this for Commentators name holder background color. #490077Change this for Author Name Holder background color.