--> Change Author Comments Color Style In Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Change Author Comments Color Style In Blogger

Highlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possib...

highlight-commentsHighlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,

  1. Comment-author
  2. Comment-body
  3. Comment-footer

Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check "Expand widget templates" Box
  4. Search for this.

]]></b:skin>

     5.   Just above it paste the CSS code below,

.mbt-comment-body {

background: #FFFFFF;

color: #008000;

border: 1px solid #008000;

margin:0;

padding:0 0 0 10px;

width:520px;

}

Make these changes:

  • To Change the background color of author comments change #FFFFFF
  • To change font color change #008000
  • To change border size change 1px, to change border style change to solid, dashed or dotted  and to change the color of the border change #008000
  • To change the width of the comment body change 520px

Tip: Use our color generator for making these changes

   6.    Next search carefully for this code in your template,

Tip: Press Crtl +F and search for one line at a time

      <data:commentPostedByMsg/>
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

 

     7.     Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>

<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>

 

     8.    Save your template and you are done!

Visit your blogs and see that the author comments now look something like this,

image

Let me know if you faced any problem. Would be a pleasure helping you. In my next post I will share several ways of customizing author comments. Have Fun! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Change Author Comments Color Style In Blogger
Change Author Comments Color Style In Blogger
http://lh3.ggpht.com/-L4dRb-_UENI/Tfp62EF493I/AAAAAAAAD3Q/MoJQ-vBgecI/highlight-comments%25255B6%25255D.gif?imgmax=800
http://lh3.ggpht.com/-L4dRb-_UENI/Tfp62EF493I/AAAAAAAAD3Q/MoJQ-vBgecI/s72-c/highlight-comments%25255B6%25255D.gif?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/06/change-author-comments-color-style-in.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/06/change-author-comments-color-style-in.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy