Auto Highlight Author Comments In Blogger Blogspot Posts

Usep Suryana 25 Apr 2011 15 comments
How to highlight author comments in blogger blogspot? Make different looks beetween comments given by an author and the visitors can be more interesting than the same looks of each.

We can know the difference of which one the author's comments and which one the visitors comments.

In this blogger guide will tell you how to highlight author comments in the comments section of blogger posts automatically. For the demo, you can see my comments on each my blog posts that already have comments.

I have tested this Blogger hack on this blog and according to the source of this blogger hack, this also works on both old generation of Blogger templates (Minima and Sand Dollar) and the latest generation of default Blogger templates, e.g. Simple. It will also work on customised templates as the comments code is likely to be very similar.

How to Add CSS Styling to Author Comments in a Blogger Post?

The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author.

These changes will not affect the CSS the styling of any of the other comments made.

Instructions to Add CSS Highlighting to Author Comments in Blogger
  1. Login to Blogger
  2. From the Dashboard go to Design > Edit HTML
  3. Back up your template by downloading it to your computer
  4. Check the Expand Widget Templates checkbox on the top righthand side
  5. Use CTRL + F by entering the following into the search box
    <dd class='comment-body'>
  6. Immediately above this line paste the following code:

    <b:if cond=' =='>
    <dd class='comment-body-author'>

  7. Now look for the following code

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

    then paste this code:

    </b:if> immediately after it.
  8. Your code should now look like this one:
    <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
    expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><></a>
    <b:if cond=' =='>
    <dd class='comment-body-author'>
    </dd> <b:else/>

    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/>
    <p> <data:comment.body/>
    </b:if> </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <b:include data='comment' name='commentDeleteIcon'/>
  9. Now using CTRL + F again find this code ]]></b:skin>
  10. Copy the following code:
    .comment-body-author {background: #f5deb3; border: 2px solid #de7008; padding: 5px;}

    Then paste the code before this ]]></b:skin>
  11. Save your template

Now click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments.



Artikel Terkait

thumbnail Judul: Auto Highlight Author Comments In Blogger Blogspot Posts
| Twitter | Facebook Page
Published :25 Apr 2011 Jam 08.15
Rating: 4.5 Reviewer: 7
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

Pin It

Silahkan tentukan pilihan komentar anda!


15 komentar:

  1. come to my blog sob

  2. great .. visit balik sob

  3. Thanks for this nice informative blog. Really too impressing.heathrow to w2 | minicab in w2

  4. Thanks, please visit my site

  5. Wah Mantap :D
    visit juga y

  6. terima kasih gan....
    lagi cari - cari bahan untuk posting ...
    tapi belum dapat...
    kunjungi balik ya :


Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

Pasang Iklan


Blogger Copast
Designed by Bamz
Untuk SEO lebih lanjut kunjungi
Trik SEO terbaru


Page Rank Webutation

ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
Link Centre Directory and Search Engine
Active Search Results trustrank Real PageRank$3,065$3,065How much is yours?

Waudit score SEO Reports for Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly Badge free search engine submission Link Exchange with BLOGGER COPAST how to create a website - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on  Ping Url - the community meta blog for singapore bloggers pagerank and Worth Personal Blogs
Online Marketing
Feedage Grade B rated
eXTReMe Tracker
Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
Submit Blog Directory Situs Monitor Backlinks Site Meter

Enter your email address:

Delivered by FeedBurner