Add a Cool Style to Blogger Threaded/Nested Comments alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Add a Cool Style to Blogger Threaded/Nested Comments 9 comments If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments. You can see a demo here. To have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is betweenand Styling Simple Nested Comments with CSS Step 1.From the Blogger Dashboard, go toTemplateand press theEdit HTMLbutton Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the search box: Step 3.Paste or type thetag inside the search box and hit Enter. After you found the highlighted code, click on the arrow next to it to expand the code, then search it again by hitting Enter. Step 4.Just aboveadd this CSS: .comments .comment-block { background:#F9F9F9; color:#555; box-shadow: 0 4px 10px#EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border:4px solid #EEEEEE!important; border-radius:10px; font:1.190em/1.2 Cambria,Georgia,sans-serif; } .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color:#EEEEEE; content: "\25C4"; font-size: 30px; } .comments .avatar-image-container { width:60px; height:60px; max-height:60px; margin:0px 0px 0 -28px; padding: 0px; border:7px solid #EEEEEE; border-radius:60px; } .comments .avatar-image-container img { overflow:hidden; width:60px; height:60px; max-width:60px; border:0 !important; border-radius:60px; } .comments .comment-thread.inline-thread { background: none; } .comments .continue { border-top: 0px solid transparent; } .comments .comments-content .datetime { float: right; font-size: 11px; } .comments .comments-content .user a{ font-size: 15px; color: #498EC9; } .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none; } .comments .comments-content .comment:first-child { padding-top: 0px; } .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px; } .comments .continue a { padding: 0px; } .comments .comments-content .icon.blog-author { background-image: none; } How to Change Blogger Threaded Comments Background, Border and Colors - replace the#F9F9F9value to change the background color of the comments; -#555to change the text comments color; -#EEEEEEto change the color of the shadow around comments; -4px solid #EEEEEEto change the border width (4px), style (solid) and color (#EEEEEE) around comments; -1.190emto change the comments font size; - to change the arrow color, replace the#EEEEEEvalue fromcolor:#EEEEEE; - to change the border width (7px),style (solid) and color (#EEEEEE) around avatars, modify this part:7px solid #EEEEEE; - to change the avatars' size and roundedness, change the60pxvalue; Here is a tool from that may help to pick your favorite color: Color Code Generator(after you choose a color, copy the hex value) Step 5.Finally, click on theSave templatebutton... and you're done! Like 5 Random Posts 4 Alternatives to Google AdWords20/10/2013 - 0 Comments Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them19/12/2013 - 1 Comments How to Add CSS code To Blogger using Template Designer08/03/2014 - 3 Comments Related Posts: How to Increase Thumbnail Resoluti... Numbered comments on threaded comme... How To Remove Blogger Threaded Comm... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... 9 comments: Kaarunya :) 1/23/2014 Loved the demo :) I will have this on my blog 4 sure but one thing, Is it possible to have that dotted lines border for the replies? Like the one that appears in ur comment border tutorial... Reply Replies Kaarunya :) 1/26/2014 No, not that... I mean like in this comment section,you see a straight line for replies right? I meant like that... Admin 1/27/2014 Hi, Kaarunya, Add this CSS just above ]]> .comments .comment-thread.inline-thread { border-left: 3px dotted #DDDDDD; } Thanks for visiting! Kaarunya :) 1/27/2014 Hey :) Thanx a lot :) It worked perfectly :) I would like to move the replies a little to the right than the first one,plz can you tell me how to do that? Thanx to your another post I have numbered perfectly :) So, I tried moving the date near the name..for some it's very near the name and few it's a little far. can you tell how to sort that also? link to check, http://www.happyhideout .com/2014/01/chahun- main-ya-na-with- english.html I am happy to have visited :) You have so many nice posts :) Design It. your way 1/25/2014 Thank you for the tutorial, this is a VERY interesting blog Reply Divy Singh Rathore 2/07/2014 Wow. Good Comment Style Reply Nina Stubljar 2/13/2014 Hi i am trying to customize my blog but every tutorial that has instructions to find isnt working for me??I use Ctrl+F to open search box and i past but therwe is 0 score...any tips? Reply Nina Stubljar 2/13/2014 hi, every tutoial that starts with find isnt working for me...i press Ctrl+F to open search box and paste it shows me 0....any tips??? Reply Appnet Groupinfo 3/06/2014 Wow its a good creativity which help for making popular blog Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 5 Like