Search for Archive .. Or Search Article

GOOGLE

How to make 3 comment column?

Okay... Hello Blogger.
In this occasion, i will tell you how to make 3 comment column?
Before I continue to the point,
was you read the previous article about easy way to make template 2 column become 3 column ?
If not yet, please read first here. After you know my previous article, Here the secret .

As you know, i was hack this template for approximately a hundred times. So it will be make me habitual to hack blogger template, more experiment and practise is the key. Let us learn, how complicated if you want to hack column comment area? Take a look for my popular post which have many comment on my blog. See below of my article! There are many commentator on there, but you have to see, how it does possible to make 3 column comment ?

To make three comments field, Actually is not require the programming language CSS , but you must to learn the position of the comment source in your blog. Here is for the example :


Click here to enlarge the picture


It is not so easy to make comment field like above picture, but first... you must find the element code of #Comment but that is css, im not using CSS for this trick. So, please check Expand Widget Template in the menu Design >> Edit HTML .

After that , find the sheet HTML code like this :
<b:loop values='data:post.comments' var='comment'>
EDIT SETTING BEGIN FROM HERE
<div expr:id='data:comment.id'>
<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'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='dofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7383798299809123340&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<div style='border-bottom:1px dashed #333'/>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
EDIT SETTING BEGIN FROM HERE
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</div>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</div>
</b:loop>

You can see the red color of above code, so replace it with this code :
<div style='float:left;width:250px;height:150px;overflow:hidden;margin:auto;border-right:1px dotted #333;border-left:1px dotted #333'>

NOTE : You see the following blue code is indicated of your source comment area and above code is the example from this template. But one thing you must remember, becarefull to edit above code.

If you have trouble for this trick, dont doubt to ask me okay!
Thanks for your attention, hope this trick usefull for you!
And I apologize if there are some word that cannot understandable !

Happy blogging with me...
Related Posts
Sponsor

14 comments :

Do not spam,porn,violence and gore!

  1. Nice Info...
    Mau coba praktek..
    tapi ntar berantakan gag yaa ?

    ReplyDelete
  2. Nice blogger information....Don't let to update your computer style ....

    BESTTHEMESXP.blogspot.com

    ReplyDelete
  3. @fajri He,,he,, thanks atas kunjungan nya....

    @besttheme : Okay... I will right there....

    ReplyDelete
  4. manteb sob, kreatif, tp koq bhs inggris yak ? hahaha, keren dah sob artikelnya, jrg2 ada blogger yg buat tutorial ky ini :)

    ReplyDelete
  5. kayanya menarik nih mas ilham, 3 kolomcoment, pi blog saya bis g yah, ok deh akan saya coba, maaf kang saya baru bisa berkunjung kesini

    ReplyDelete
  6. saya coba pasang tp g berhasil muncul pesan "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "

    kira2 kenapa yh

    ReplyDelete
  7. ɑӀҟɑէɾօ Հօղҽ puyeng kalo liat ginian tapi mantaf tipsnya..
    i.q ane ga nyampe he he

    ReplyDelete
  8. wah menarik nih, tricknya, kapan-kapan ane coba ah...

    ReplyDelete
  9. wah inggris punya nih ham...mantap nian kau punya bahasa,,,,goood and thank...

    ReplyDelete
  10. dah tk coba hasilnya mlh kcau mas

    ReplyDelete
  11. Menarik tips n triknya bro
    Thanks a lot

    ReplyDelete
  12. infromasi yang sangat menraik teir aksih sudah disampaikan salam sukses selalu elwat blogging nya yupz ^__^

    ReplyDelete