Menambah Nomor dan Photo Author pada Kotak Komentar

Kali ini saya kembali lagi bersharing dengan sobat sekalian, yakni tentang menambah nomor komentar beserta photo gantengnya . Tentunya, hal ini menambah kesan yang "lain" karena para pembaca tahu dan melihat gambar (photo) mereka yang yang berkomentar di blog kita. Asyik gak? Coba deh sobat berkommen ria di blogku ini, pasti photomu yang guanteng akan terpampang jelas, dengan syarat sobat sedang dalam mudus login.

Tertarik untuk memasangnya di blog sobat? Oke kita akan lanjutkan, dan sebelumnya saya berterima kasih banyak pada Mas Jaloe yang telah berbagi-bagi ilmunya. Bagi sobat yang sudah tahu, silahkan abaikan saja. Bagi sobat yang belum, monggo untuk menyimaknya sampai selesai. Tutorial kali ini saya ambil dari beliau, karena saya pikir tidak ada salahnya kita saling berbagi dan melengkapi sesama blogger.

Oke kita kangsung saja masuk ke topik pembicaraan...

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..

Mas Jaloe : Numberinng Comment

Ramani : author comment highlighting

Purplemoggy : comment author photos

blog.randomnessf : translation numbering comments