Menambah Numbering-Comments dan Photo-Author pada layout komentar 2 kolom

Artikel ini telah di update untuk mengetahui lebih lanjut silahkan baca pada tulisan ini “ Upgrade desain halaman komentar 2 kolom “

Sebelumnya saya ucapkan terimaksih yang sebesar-besarnya kepada kawan-kawan atas support dan saranya pada tulisan  " mendaur ulang perwajahan atau desain layout komentar ". 

Juga perlu di tegaskan di sini , inti sebenarnya tulisan tersebut bukan pada perwajahannya, tapi lebih kepada trik membagi kolom komentar menjadi dua kolom. Sedangkan untuk redesain selanjutnya, terserah anda karena saya pikir ini sangat fleksibel dan mudah sekali untuk di modif.

Selanjutnya pada sesi tulisan ini, saya hanya ingin melanjutkan bagaimana caranya meng-integrasikan atau menambah nummber-comment dan photo-comment ke dalam halaman komentar dua kolom ini.

 

 

Yuu mari kita lanjut , jika ingin mengetahui caranya :

Pertamaxxxx :

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

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

 

Keduaaxxxxxxx :

masukan Syntax Css ini.

* {
margin: 0px;
padding: 0px;
}

 

di atas Css body ini.

body { 
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;

  }

 

Artikel Lain : 
membuat alert message
Bingkai untuk karya puisi 
menambah sosial bookmarking
mempercantik bagian komentar

*Note : salah satu kegunaan syntax css di atas, untuk memulai valuenya secara default adalah nol untuk margin dan padding. baik di hitung dalam browser firefox maupun Ie.

 

Ketigaxxxxxxxx :

Cari syntax Css Comments template anda .  biasanya di bawah tulisan keterangan seperti ini.

/* Comment  */ 

Atau seperti ini ....

 

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

* jika masih belum tahu letak kode css tersebut .. tanya pada tetangga blog sampen yg sudah ahli.

 

Setelah ketemu ganti semuanya dengan Syntax Css ini.

 

/* Comments
----------------------------------------------- */

#comments { background:#fff; border: solid #cccccc 1px;/* border atau bingkai */ margin-bottom:10px; }

#comments h4 {margin:1em 10px;  padding:10px;  font-weight: normal;
  line-height: 1.4em;  text-transform:lowercase;  letter-spacing:.2em;
  color: #ccc;
  }

#comments-block {margin:.5em 0 1em;  line-height:1.6em;
  padding:10px;
  }
#comments-block .comment-author {display:block; width:90px;
  height:110px;border:1px dotted #ccc;
  margin:0;  text-align:center;  padding:5px 0 0;  line-height:1.4em;
  font-size:12px; text-transform:capitalize;
  }

#comments-block .mount-author {
  display:block;  overflow:hidden;  max-height: 16px; 
text-align:center; 
  }

#comments-block .comment-body {
  background:#fff ;  border-top:3px double #ccc;  margin:0;
  border-right:1px dotted #ccc;border-left:1px dotted #ccc;
  padding:10px 5px 0 10px;
  }
#comments-block .comment-footer {
  background:#fff ;  border-right:1px dotted #ccc; 
  border-left:1px dotted #ccc;border-bottom:3px double #ccc;
  margin-bottom:5px; padding:70px 5px 5px 10px;  line-height: 1.4em;
  text-transform:normal;  font-size:10px;   letter-spacing:.1em;
  }

#comments-block .comment-body-author p {
  background:#EFEBE0 ;  border-top:3px double #ccc;
  margin:0; padding:10px 5px 0 10px;
  }
#comments-block .comment-footer-author {
  background:#EFEBE0 ;border-bottom:1px solid #ccc;
  margin-bottom:5px;padding:70px 5px 5px 10px;
  line-height: 1.4em;  text-transform:normal;
  font-size:10px; letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0;
  }
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }

.deleted-comment {
  font-style:italic;  color:gray;
  }

.numberingcomments{
margin-top:5px;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 20px; font-weight: normal;
}

 

Keempaxxxxxx :

cari kode html di bawah ini.

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

 

dan keseluruhan kodenya jadi atau mirip  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 seluruh kode Html di atas dengan kode ini.

<dl id='comments-block'>
       <script type='text/javascript'>var CommentsCounter=0;</script>
      <b:loop values='data:post.comments' var='comment'> <div style='width: 10%; float: left;'><div class='' expr:id='data:comment.id'>
        <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>        
         <div class='mount-author'> <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></div>
         <div class='commentphoto' style='margin-top:.5em;'/><span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

        </dt></div></div>
        <div style='width: 80%; float: right;'>
        <b:if cond='data:comment.author == data:post.author'>
          <dd class='comment-body-author'>
            <p><data:comment.body/></p>
          </dd>
          <dd class='comment-footer-author'>      

          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
        <b:else/>

          <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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd></b:if></div>

<div style='clear: both;'/> 
      </b:loop>
    </dl>

 

Kelimaxxxxxxx :

Masukan javascript untuk photo-author .

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
BloggerProfiles.imageWidth = 50;
BloggerProfiles.imageHeight = 60;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

 

di atas tag Html ini.

</head>

 

Setelah itu Simpan Template.

 

Special Thanks..

Ramani : author comment highlighting

Purplemoggy : comment author photos

blog.randomnessf : translation numbering comments

Page views this post: reader