Membuat Tampilan Komentar Blogger Seperti Friendster

Setelah agak sehatan , akhirnya saya posting ini Membuat Tampilan Komentar Blogger Seperti Friendster .
Sebenarnya ini request dari mbak Atca begini katanya:

mas...tolong dong bikin tutorial bikin kotak komentar yang kaya gini..
yah ...yahhhh..kutunggu.

Lihat Komentar ala friendsternya :


Sebelumnya tutorial ini saya dapat dari Kang Jaloe,
Apa mau tukang arsip yang ngasih tutornya, ok deh ikuti langkah-langkahnya :

• Buka Blogger.com

• Klik Tata Letak/Layout

• Klik Edit HTML → Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Kemudian Centang Expand Widget Template

• Cari kode berikut :

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

  Atau secara lengkapnya begini :

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

  Sobat hapus semua kode diatas ganti dengan kode dibawah 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' style='margin-top:.5em;'/>
  <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>

• Masukkan Syntax CSS ini :

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

  diatas CSS ini :

  body {

• Terus Sobat cari kode ini :

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

• Kode asli Comments di minima template begini :

  /* Comments
  ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
  
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }
  

• Hapus semua kode diatas ganti dengan kode ini

  #comments{background:#EBF3FB; border:solid #ccc 1px; 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:#EFEFEF; border:5px solid #cccccc;
  margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
  * html .comment-form { width:87%; }
  .owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
  background:#EFEBE0;padding:8px 15px 15px 15px;
  border-left:1px dotted #fff;border-right:1px dotted #fff;
  border-top:3px double #fff;border-bottom:3px double #fff;}
  .owner-Body p {
  font-size:100%;margin:0 0 0 0;color:#FF0000;
  text-decoration:bold;
  }
  .deleted-comment {
  font-style:italic; color:gray;
  }

• Bila tidak menemukan kode /* Comments bisa diatasi dengan menaruh kode diatas diatas tag ]]></b:skin>
  

• Selesai deh.

Bila Ingin Menambahkan/Memunculkan Foto di area komentar ikutin langkah-langkah di bawah ini :

Menambah Gambar di Area Komentar.

• Masukkan Script di bawah ini di atas kode </head>
  

  <script src='http://www.geocities.com/ridwanox/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>
  

Keterangan :

• Warna merah merupakan alamat dari JS sebaiknya , sobat upload sendiri di tempat hostingan punya sobat seperti googlepages,ripway dan sebagainya.
• Warna biru merupakan Foto yang akan muncul di area komentar,bila yang berkomentar tidak menggunakan id blogger atau biasa disebut annonymous.
• Warna hijau : 50 merupakan lebar foto dan 60 merupakan tinggi foto.

Membuat Tampilan Komentar Blogger Seperti Friendster.Selesai jugadeh.
Bila mengalami kegagalan di coba terus,terus dan terus.
Saya juga sering mengalami kegagalan
Insya Allah bila berusaha maka akan berhasil.