Changing the Display of Blog Comment Columns - BLOGHINT

Changing the Display of Blog Comment Columns

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.


In my previous article that discussed " How to Make Night Mode on a Blog " which was asked by a Facebook user. And after I posted the article, he asked me again to make a tutorial that talks about. Make a Comment Column Display Like the one on My Blog.

Okay, we just get to the discussion. But before that, since there are some users who are still confused about the placement of the script on the blog, this time I will be more clear about placing and changing the script on the blog, I hope this tutorial can be easily understood by readers.

The point of this article.
1. Login to your blog.
2. Select Themes / Themes> Edit HTML
3. Then add the CSS comment above </head>

<style type='text/css'>
/* CSS Comments myabdurrahim.com */
        .comments h3 {
          line-height:normal;
          text-transform:uppercase;
          color:#333;
          font-weight:bold;
          margin:0 0 20px 0;
          font-size:14px;
          padding:0 0 0 0;
        }
        h4#comment-post-message {
          display:none;
          margin:0 0 0 0;
        }
        .comments{
          background: #fff;
    position: relative;
border-radius: 10px;
padding:20px 20px 0 20px;
        }
        .comments .comments-content{
          font-size:13px;
          margin-bottom:8px
        }
        .comments .comments-content .comment-thread ol{
          text-align:left;
          margin:13px 0;
          padding:0
        }
        .comments .comment-block{background:#fff;padding:18px 20px;line-height:26px;border-radius:10px;margin-bottom:20px;position:relative;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 5px 2px}
        .comments .comment-block:before {
              content: &#39;&#39;;
    right: 100%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: rgba(0,0,0,0.05);
    border-width: 10px;
        }
.comments .comment-block:after {
content: &#39;&#39;;
    top: 19px;
    right: 99.9%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #fff;
    border-width: 9px;
}
        .comments .comments-content .comment-replies{
          margin:8px 0;
          margin-left:60px
        }
        .comments .comments-content .comment-thread:empty{
          display:none
        }
        .comments .comment-replybox-single {
          background:#f0f0f0;
          padding:0;
          margin:8px 0;
          margin-left:60px
        }
        .comments .comment-replybox-thread {
          background:#f0f0f0;
          margin:8px 0 0 0;
          padding:0;
        }
        .comments .comments-content .comment{
          margin-bottom:6px;
          padding:0
        }
        .comments .comments-content .comment:first-child {
          padding:0;
          margin:0
        }
        .comments .comments-content .comment:last-child {
          padding:0;
          margin:0
        }
        .comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child {
          margin:0px 0px 5px 30%
        }
        .comment .comment-thread.inline-thread .comment:nth-child(6) {
          margin:0px 0px 5px 25%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(5) {
          margin:0px 0px 5px 20%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(4) {
          margin:0px 0px 5px 15%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(3) {
          margin:0px 0px 5px 10%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(2) {
          margin:0px 0px 5px 5%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(1) {
          margin:0px 0px 5px 0;
        }
        .comments .comments-content .comment-thread{
          margin:0;
          padding:0
        }
        .comments .comments-content .inline-thread{
        }
        .comments .comments-content .icon.blog-author {
          display:inline;
        }
  .comments .avatar-image-container{border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 5px 2px;width:auto}
        .comments .comments-content .icon.blog-author:before {
          content:&#39;\f058&#39;;font-family:fontawesome;color: #00c4ff;
        }
        .comment-header {
          font-size:13px;
        }
        .comments .comments-content .datetime {
          margin-left: 6px;
        }
        .comments .comments-content .datetime a {
          color:#bdbdbd;
    float: right;
    font-size: 10px;
        }
        .comments .comment .comment-actions a {
          display:inline-block;
          color:#333;
          font-weight:bold;
          font-size:12px;
          line-height:15px;
          margin:4px 8px 0 0;
        }
        .comments .continue a {
          color:#333;
          display:inline-block;
          font-size:10px;
        }
        .comments .comment .comment-actions a:hover, .comments .continue a:hover{
          text-decoration:underline;
        }
</style>

And don't forget, delete your old CSS comments and replace them with the ones above.

4. Next, look for the tag below
<b:include data='post' name='comments'/>

Then Replace with the tag below.
<b:include data='post' name='threaded_comments'/>

Change the tag on the top only.
And each template may have different tags.

If, confused, see the image below.

5. Repeat step 4.
Until you change 4 times, in the tag below. See the image below.
<b:include data='post' name='threaded_comments'/>

Every template is sometimes different, for example, a template from the newest version of blogger.
You don't need to change the comment tag anymore, and you just need to change the CSS with the CSS above.
because from the blogger template the tag already exists, namely: 'threadedcomments'
while in my template, namely: 'comments'. must be changed to 'threaded_comments'

So if you are a blogger template user, you only need to play on the CSS.
But if you are a user of another template, such as the arlina template, you must replace the comment tag in step 4.

When finished, save the template and see the results.
For DEMO you can see what's in my template.
The template that I use, maybe at any time it will change so it is possible that you won't be able to see the demo again. However, you can see an example like the first image above.

* UPDATE
I just applied to my other blog, using a blogger template, and I only need to change the CSS.


In the demo the comment avatar is still in the default blogger template, and I haven't removed the CSS yet. But in terms of appearance it is similar to the template that I use.

Ok, maybe that's all my articles this time.
If you experience problems / problems during the application of this tutorial, please leave your question in the comments below. Thanks.

0 Response to "Changing the Display of Blog Comment Columns"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel