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 sengihnampakgigi. Tentunya, hal ini menambah kesan yang "lain" karena para pembaca tahu dan melihat gambar (photo) mereka yang yang berkomentar di blog kita. Asyik gak? celebrateCoba 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...tepuktangan

Pertamaxxxx :

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

edit html

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

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;

  }

 

*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

13 Comments

  1. Thank's banyak atas tutorialnya ya...:X :X

    ReplyDelete
  2. Ngetes aja dulu pak ... muncul gak foto saya?

    ReplyDelete
  3. Kalau ini muncul gak? Ngambil fotonya dari user profil ya pak?

    ReplyDelete
  4. bags banget infonya....maksihnya

    ReplyDelete
  5. @ Mas Deden:
    Makasih atas komentarnya. Untuk menampilkan foto anda, waktu kommen anda harus dalam modus login...

    @ Muhammad :
    terima kasih kembali ...
    Jangan pernah menyesal untuk berkunjung kembali ya..

    Salam...

    ReplyDelete
  6. Syaukron katsir, Kang Baha'....

    Alhamdulillah di blogku sudah bisa di kasih foto komentatornya. Silahkan kunjungi blogku di sini.

    ReplyDelete
  7. Ya...jangan lupa posting terus blognya, Mas rian....

    ReplyDelete
  8. thanks ngt tretan dah mau ngajarin ngedit blog sekalian bikin blog sekolah gw, i love u so much..... =)) =))

    ReplyDelete
  9. Kok gak ada foto yang muncul????

    ReplyDelete
  10. sakalangkong fren.
    marah jek lah tedung maloloh

    ReplyDelete
  11. waah...template saya ga ada kode commen yg kaya diatas niy...
    ga bisa ditambahin poto sm nomor dong...hiks2

    ReplyDelete
  12. tes ngeliat photoku yang ganteng he..he..

    ReplyDelete

Post a Comment

Previous Post Next Post