How to Customize Blogger Comments By Adding a Background Color and Border alphause

Po ... How to Customize Blogger Comments By Adding a Background Color and Border 38 comments The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment. - Add a Separator To Blogger Comments - Add a Divider Below Comments in Blogger - Fully Customize Your Blogger Comments By Changing The Background Color and Border The first method is the easiest: we'll separate our comments by adding a border below each of them. How to Add a Separator/Border To Blogger Comments Step 1.To add a simple separator go toTemplate>Edit HTMLand click on the small arrow on the left of ... Step 2.Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code: ]]> Step 3.Paste the following style just above it: - If we are using threaded comments (with the reply option): .comment-block { border-bottom: 1px solid#000000; } .comments .continue { border-top: 0px solid #000; } - If we are using previous commenting system (with no reply option) #comments-block .comment-footer { border-bottom:1px solid#000000; } Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value. Step 4.Save the Template. Instead of a simple border, we can also add a divider/image between our comments. How to Add a Divider (Image) Between Each Comment in Blogger Step 1.Go toTemplate>Edit HTMLand search (CTRL + F) for the following piece of code: ]]> Screenshot: Step 2.Paste the following just above it: - If we are using threaded comments (with the reply option): .comment-block { background-image:url( http://1.bp.blogspot.com /-YaY5yi0UcbM/UTpA2jWBJFI /AAAAAAAAC_0/UXbviThYl2w /s1600/74.gif); background-repeat:no-repeat; background-position:center bottom; padding-bottom:30px; margin-top: -10px; } .comments .continue { border-top: 0px solid #000; } - If we are using previous commenting system (with no reply function) #comments-block .comment-footer { background-image:url( http://1.bp.blogspot.com /-YaY5yi0UcbM/UTpA2jWBJFI /AAAAAAAAC_0/UXbviThYl2w /s1600/74.gif); background-repeat:no-repeat; background-position:center bottom; height: 50px; } Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value) Step 3.Save the Template. But you can still have more styles for each comment, for example adding a background color and a border. How to Add A Border and A Background Color To Blogger Comments Step 1.Go toTemplate>Edit HTMLand search for the following piece of code: ]]> Step 2.Paste the following just above it: - If we are using threaded comments (with the reply option): .comment-block { background:#F9F9F9;/* Background Color */ border: 1px solid #f1f1f1;/* Border style */ margin-bottom:20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .comments .comment-thread.inline-thread { background-color: #FAFAFA;/* Background color behind the replies */ border-left: 4px dotted #E6E6E6;/* Border on the left side of replies */ } .comment-content { padding:2px 10px 10px 10px; color:#444444;/* Font Color in Comments */ } .datetime a { font-style:italic; font-size:9px; margin-left: 2px; } .comments .comments-content .user a{ color:#1982D1;/* Author's name color */ font-size: 12px;/* Author's name size */ padding-left: 10px; font-weight:bold; text-decoration:none; } .comments .comment .comment-actions a,.comments .comment .continue a{ display:inline-block; margin:0 0 10px 10px; padding:0 15px; color:#B4B4B7; text-align:center; text-decoration:none; background:#F8F8FB; border:1px solid #C2C2C5; border-radius:4px; height:20px; line-height:20px; font-weight:normal; cursor:pointer; } .comments .continue { border-top: 0px solid #000; } .comments .comments-content .icon.blog-author { background-image: none; margin-left: -10px; } .comments .avatar-image-container{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 40px; max-height: 40px; border: 1px solid #F2F2F2; padding: 1px; } .comments .avatar-image-container img{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; max-width: 40px; height: 40px; }Step 3.Save the Template. - If we are using previous commenting system (with no reply function): Step 1.Search for this line in your template: Step 2.Then, add the following code just below of it:

Step 3.Look a little further down and you'll see thecode and just above it, add this:

Step 4.Now find this: ]]>Step 5.And just above of it, add this CSS code: .comments-new{ background:#F9F9F9;/* Background Color */ border: 1px solid #f1f1f1;/* Bprder Style */ margin-bottom:20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .comment-body { color:#444444;/* Font Color in Comments */ padding:10px; } .comments-new a { padding-left: 5px;/* Link color */ color: #4A9BD8; } .comment-timestamp a { font-style:italic; font-size:9px; padding-right:10px; padding-left:10px; } .comments .avatar-image-container { overflow: visible; }(The rounded edges will not work in Internet Explorer with CSS) In either case, you can change the background color, border, etc.. in parts with annotations in green. Step 6.Save the Template. If you need more help, leave a comment below. Like 0 Random Posts How to make the background image of the blog fill the entire screen17/09/2013 - 1 Comments How to Add Different Backgrounds In Blogger Pages14/04/2012 - 4 Comments How to create click events using CSS13/01/2014 - 3 Comments Related Posts: How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... 38 comments: Audrey 3/08/2013 i have been looking for a good tutorial on this, and yours worked great! thank you for sharing! Reply Replies Admin 3/10/2013 You're welcome, Audrey. Thanks for stopping by :) Mohammad Yaseen M.Y.B 3/08/2013 Wao great detailed and very informative straight forward tutorial, bro you got good writting skills, keep up the good work. Free GAMES & SOFTWARES Reply Portia Hunt 4/06/2013 Thank you so much for this tutorial! Reply Portia Hunt 4/06/2013 Just a quick question, how do I increase the distance between the comment author and the border? It's even about the other sides but not at the top. My blog is: http://portiahunt.blo gspot.co.uk Reply Replies Admin 4/06/2013 Add below.comments .comments-content .user a{this line: padding-top: 10px; You can increase/decrease the distance by changing the 10px value. I hope this will help. Thanks for visiting :) Flory D 4/10/2013 I tried to add a Divider (Image) Between Each Comment in my blog and doesn't work. Please help me! My blog is: http://flory4all.blogsp ot.ro Reply Replies Admin 4/11/2013 Hi Flory, Please send me a copy of your template at helplogger76@ gmail.com Thank you. Flory D 4/11/2013 I sent a copy of my template to you. Thank you! Reply Replies Admin 4/12/2013 Sorry but I didn't receive your mail. Maybe try sending it again? helplogger76@ gmail.com Flory D 4/12/2013 I sent my mail again. Thank you. aryan 4/12/2013 its great information..thnaks for sharing Reply Stephanie 5/29/2013 This was awesome! How do I change the background color behind the comment boxes themselves? I used your template and it put the comments into lovely separate boxes, but the color behind the boxes is gray. Reply Replies Admin 5/31/2013 Hi Stephanie, Please search for this piece of code in your template: #comments { ..and just below you should see this line: background:#ccccccnone repeat scroll top center; Replace#ccccccwithtransparentand see if it still appears. Anonymous 6/14/2013 How can I get the date under someones name? And how do I get that in uppercase letters? Reply Rotana baba 7/01/2013 Its nice as u explained but in mine blog such codes are not found.. so How do I do it.. plz check mine once suggest me to change in http://www.arabie3lan.co m الشيخ الروحاني which part so that i can obtain as you explained here. Reply Anonymous 8/28/2013 Hi, can u please help in getting "Comment as:" removed and make a simple comments session. can u please respond to anishasblog@ gmail.com Reply Pravab 9/07/2013 Thank you very much. I have modified and used this and few other scripts from this blog. http://pravab.blogspot.c om/ Reply NGO HIEU 9/29/2013 Design is always nice comments, thank you very much! Reply kayeekelly 10/15/2013 hi, what's the code we need to put before for the flower boarder ??? Reply Amber Noël 10/18/2013 Thanks for this. I can't seem to get my comment box to not be white, I've tried a handful of different versions. I've successfully added other codes like the box around the admin comments, but for some reason the comment box will not change. It looks terrible, please help. www.deutschevegan. blogspot.com Reply JUST.SO.APRIL♥ 10/29/2013 Thank You sooo much!! You are such an life saver!! I looked everywhere and this was the best tutorial!! Justsoapril.blogspot.com Reply Shahzaib Sultan 12/25/2013 Great... how to remove the reply button that appears under author reply. thanks in advance Reply Replies Admin 12/29/2013 Add this code just above]]> .comments .comment .comment-actions a,.comments .comment .continue a{ display: none; } Thanks for stopping by! Edgar 12/26/2013 It worked nice in FF, but the avatars got messed in Chrome, why and how to fix it? http://juegosparaescap ar.blogspot.com/ Reply Replies Admin 12/29/2013 Hi Edgar, Please add this above]]> .comments .avatar-image-container { overflow: visible; } Sorry for the inconvenience. I tested it on Firefox and I didn't noticed this issue before. Hope it works now... clicksomemore 12/28/2013 wow thanks,it worked...you are a star Pls help me,for some reason comments font size changed to smaller size,i have tried to change my codes invain...have a look here and advise accordingly http://clicksomemore.blog spot.com/2013/12/good- morning- folks.html?showComment= 1388259189683#c467964 3691472638963 Reply clicksomemore 12/28/2013 just comment below the link I sent you and i will work on it.Thanks Reply Tektones Agriniou 12/29/2013 Hello Admin, Thank you for your great work! Can you please help me? I tried to change the borders and the background of the replies, but it doesn't work. It shows this notice Invalid variable declaration in page skin: Variable is used but not defined. Input: widget.alternate.text.color Did I do something wrong? Reply Replies Admin 12/29/2013 Hi Tektones, It seems that your template doesn't have a variable with the "widget.alternate.text.color" name, so you need to search this line in your template and remove it: $(widget.alternate.text.color) Then try to add the code again and see if you still get that error. Hope this works. Thanks for visiting! Edgar 12/29/2013 This comment has been removed by the author. Reply Tektones Agriniou 12/30/2013 Hello again Admin, Thank you very much for your reply. Unfortunatelly I could not find the line of the code. It seems that it does not exist! I use a template from blogger itself. Really strange! Reply Admin Csm 1/18/2014 Hi buddy, how are you...its been awhile, well I need a favor again [ you know you're my rescuer... wink], I have tried to change the font for comments invain, I want to it be Arial and not the current one.If you can hook me up with procedure or codes will be awesome? kindly reply on my post so it will be easy to see it http://clicksomemore. blogspot.com /2014/01/dar-es- salaam-listed- among-top-10- most.html#comment- form Reply Replies Admin 1/27/2014 Add this just above ]]> .comments .comments-content .comment-content {font-family: Arial, sans-serif;} Kaarunya :) 1/26/2014 Hey, thanq 4 de post :) If I try increasing the avatar size more that 40px the image goes under the comment box. i.e the comment box lays on top of some of the avatar... Is there a solution for that? thanq Reply Replies Admin 1/27/2014 Add this CSS just above]]> .comments .comment-block { margin-left: 80px; } And change the margin-left value (80px) Kaarunya :) 1/27/2014 Hey thanq :) It worked perfectly, I had the problem with the rounded user image, now it's perfect :) Mamzelle 2/11/2014 Hello! Great autorail... It works fine except for one little détail. When someone (anonymus) replies to one of my reply, their name and date does not have the same spacing as the author. It is to close to the edge of the border. Any suggestion??? Thanks in advance Reply next