Wednesday, 13 June 2012

Tricks To Modify Blogger Threaded Comment

WordPress, the biggest competitor of Blogger in blogging. Blogger had provided threaded comment option in order to beat WordPress. These comments added officially to all standard type Blogger templates. These comments are really attractive but most of the blogspot users find difficulty in modifying these comments as they uses a large hesitating CSS code. So I look through this code and write this step by step tutorial to change the appearance of threaded comment. As my previous article was related to add threaded comments to blogger but today I will tell to change the appearance of threaded comments.

How To Modify Threaded Comment

You can easily change the basic appearance of threaded comments by this tutorials. lets' see :)

How To Highlight Author Comment

  1. Login to Blogger Dashboard.
  2. Go to Design /  Edit HTML.
  3. Download full template before making any changes to it (learn more) .
  4. Search for following piece of code in template.
]]></b:skin>
  1. Paste the following code just above it.
    .comments .comments-content .icon.blog-author
    {
    position:absolute;
    top:-12px;
    right:-12px;
    margin:0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAFnxlcZZWs8n_YbWhrkBaXRLmOde79vgHSOQ8JwTehfKJwq-jkAG_oP9JNS9X9yJFl8_5VrVHTkKLSy4byTCyXNr4uYyGhHvQrUsJwHf8r6VZjtEWS3vIyBM6acZFj6TUHJYWSnbr4g/s320/picresized_1338990142_comment-author-blue.gif);
    width:36px;
    height:36px;
    }

    Note:Make Following Modification

    • You can adjust the position of image by adjusting top:-12px and right:-12px from above coding.
    • You can replace this image by changing green URL with another image URL.

    Modify Date And Time In Threaded Comment

    /* widget on http://internetricks4u.blogspot.in */ 
    .comments .comments-content .datetime
    {
    //.. .CSS code goes here..
    }
    The CSS code applied to above classes will change the appearance of date and time block. You can change text size, text color, text-background etc. by adding appropriate CSS coding.

    How To Modify Reply Comments:-

    It enable you to differentiate between the normal comments or a reply comments. You can add different background color, border, font etc. in all reply comments.
    /* widget on http://internetricks4u.blogspot.in */ 
    .comments .comments-content .inline-thread
    {
    CSS code will be here..
    }

    I will update this tutorial very frequently to explore more about threaded comment.)

    More Article From The Same Author

    No comments:

    Post a Comment