Upgrade desain halaman komentar 2 kolom

Tulisan ini merupakan “ Upgrade Vesion Tentang Desain layout komentar  2 kolom “. thank buat blog hajunik karena source kodenya saya ambil dari template buatannya “ True Elegan “, dan makacih juga buat suhu mochal yang telah memodifikasi pada author comment highlighting-nya .

Terutama di bandingkan dengan yang terdahulu ( bisa di lihat di sini ), maka upgrade version ini  untuk loding time-nya lumayan ringan, dan juga jika di lihat dari source kodenya lebih simple dari sebelumnya.

Cara Penerapanya :

Pertama :

Backup dulu template kita. setelah itu buka tab Tata Letak- Edit Html.

Kemudian centang/tandai kotak kecil di samping tulisan Expand Template Widget.

 

Setelah itu cari kode berikut ini.

<b:loop values='data:post.comments' var='comment'>

kode keseluruhan-nya menjadi  seperti di bawah ini.

<dl 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'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </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>
        </b:loop>
      </dl>

 

Kemudian ganti semua kode di atas dengan kode html ini.

<ul class='commentlist'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'><li>
<div class='' expr:id='data:comment.id'>
<div class='pane_l'>
<div class='c_author'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<br/>
Said
</dt>
</div>
<div class='c_avatar'/>
<div class='commentphoto' expr:class='data:post.avatarIndentClass' style='margin-top:.5em;'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:else/>
<div class='pane_r'>
<p><data:comment.body/></p>
<b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
</div>
</b:if></div>
<div class=' clear'/></li> </b:loop>
</ul>

 

Kedua :

Pada bagian kedua ini menyimpan ( atau menganti )  Css comment. dan yang pertama kali  saya lakukan adalah menambah kode Css global riset, – untuk kasus ini , saya menambahkan global reset list .

ul {   
   margin:0px;   
   padding:0px;  
   list-style-type:none;  
  }

Simpan kode tersebut di atas atau di bawah properti body ini

body{ background:$bgcolor;  margin:0;…. }

 

kemudian setelah itu . saya mengganti css comment  - red. biasanya di bawah kode keterangan seperti ini.

/* Comment  */

Atau seperti ini ....

/* Comment
-------------------------------------------------- */

dengan kode css berikut ini.

#comments{background:transparent; border:solid #ccc 0px;  margin-bottom:10px}
#comments h4{ margin:1em 0;  padding:10px;  font-weight:bold;   line-height:1.4em;  text-transform:uppercase;  letter-spacing:.2em;   color:$sidebarcolor}
#comment-list {margin-top: 10px;padding:10px;
background: transparent;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: transparent;
border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;background:#fff;display: inline;
width: 110px;min-width: 110px;max-width: 110px;
border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
* html .pane_l{margin-top:15px; }
.pane_r {display: block;line-height: 1.5em;margin-left: 125px;
padding:8px 15px 15px 15px;;background:#fff;
border-left:1px dotted #CCCCCC;
border-right:1px dotted #CCCCCC;
border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
.c_author {font-size: 13px;font-weight: normal;height:30px;
overflow:hidden;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
padding-top:20px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:transparent; border:0px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:95%;}
* html .comment-form {  width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:transparent;padding:8px 15px 15px 15px;
border-left:1px dotted #33CCFF;border-right:1px dotted #33CCFF;
border-top:3px double #33CCFF;border-bottom:3px double #33CCFF;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:black;
text-decoration:bold;
}
.deleted-comment {
  font-style:italic;  color:gray;
  }

 

* atau jika susah mencarinya , bisa juga langsung di simpan kode css tersebut di atas tag.

]]></b:skin>

Setelah itu Simpan Template ..

Page views this post: reader