Ninja Cloak : Anonymous Web Proxy

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 :



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