Memodifikasi Kolom Komentar di Blogspot Jadi Keren

Kolom komentar di halaman postingan blogspot merupakan bagian dimana pengunjung blog dapat meninggalkan tanggapan atau pesan terkait konten blog yang kita tuliskan. Kolom ini biasanya terletak di bagian bawah setiap postingan blog dan memungkinkan pengelola blog dapat mengelola seluruh komentar yang masuk.

Perlu diketahui, bahwa setiap kode template antara yang satu dengan yang lain biasanya berbeda. Jika tips yang aku pelajari dari Blognya Kang Rohman ini tidak sama dengan kode yang ada pada template Anda, maka maaf saja berarti anda kurang beruntung. Paling tidak kode-kode HTML ini, terutama CSS-nya hampir mirip dan dapat dijadikan referensi saat kita mengutak-atik atau memodifikasi kolom komentar blogspot.

Kita langsung saja ke langkah-langkah bagaimana cara memodifikasi kolom komentar ala Blog Kang Rohman.

1. Login ke blogger;
2. Klik Tata Letak, lalu pilih tab Edit HTML;
3. Klik tulisan Download Template Lengkap untuk melakukan backup template. Hal ini penting ya? untuk mengantisipasi template blog gagal modif, hehe...;
4. Beri tanda centang pada kotak kecil di samping tulisan Expan template Widget;
5. Lalu Cari kode pada bagian CSS berikut ini:
   
   

   #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;
     }
   

   
   
6. Hapus kode CSS di atas, lalu ganti dengan kode di bawah ini:
   
   

   #comments h4 {
     margin:0;
     font-weight: bold;
     line-height: 1.4em;
     text-transform:uppercase;
     letter-spacing:.2em;
     color: #000;
     }
   
   #bg_commentblock {
       width: 548px;
       background: #ffffff;
       float: left;
       padding:20px;
       margin:0 0 10px 0;
       border:1px solid #C0C0C0;
       }
   
   #commentblock {
       width: 510px;
       background: #E8E8E8;
       text-align:left;
       padding: 20px 20px 10px 20px;
       margin: 10px 0px 0px 0px;
       border-top: 2px solid #333333;
       border-bottom: 1px solid #333333;
       }
   #commentblock ol {
       list-style-type: square;
       margin: 0px 0px 0px 10px;
       padding: 0px 0px 10px 0px;
       }
   .commentdate {
       font-size: 12px;
       padding-left: 0px;
       }
   #commentlist li p {
       margin-bottom: 8px;
       line-height: 20px;
       padding: 0px;
       }
   
   .commentname {
       color: #333333;
       margin: 0px;
       padding: 5px 5px 5px 0px;
       }
   
   .commentinfo{
       clear: both;
       }
   
   .commenttext {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4xDMop3kHD96fhrppebN_0NiXzbheOG_TsS9tCLh8W7-8AQP3h0X_zHtMb-Gre6H-5TvyNf62u5r4wMGeoQKBji1knbisdcc6GaDzMOg4xe2cFZYX2RIGmu5WxRWszKBsYNPnU6MGixAftRF6VsXnPqIoK-m21GRrzkvxNqctvTQGPb6K6XwWHA3ghU/s1600/comment.gif) no-repeat top left;
       }
   
   .commenttext-admin {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4xDMop3kHD96fhrppebN_0NiXzbheOG_TsS9tCLh8W7-8AQP3h0X_zHtMb-Gre6H-5TvyNf62u5r4wMGeoQKBji1knbisdcc6GaDzMOg4xe2cFZYX2RIGmu5WxRWszKBsYNPnU6MGixAftRF6VsXnPqIoK-m21GRrzkvxNqctvTQGPb6K6XwWHA3ghU/s1600/comment.gif) no-repeat top left;
       }
   

   
   
7. Lihat Ke bagian bawah, dan cari kode ini:
   
   

   <b:includable id='comments' var='post'> 
   <div class='comments' id='comments'> 
   <a name='comments'/> 
   <b:if cond='data:post.allowComments'> 
   <h4> 
   <b:if cond='data:post.numComments == 1'> 
             1<data:commentLabel/>:
           <b:else/>
             <data:post.numComments/> <data:commentLabelPlural/>:
           </b:if>
         </h4>
   
         <b:if cond='data:post.commentPagingRequired'>
           <span class='paging-control-container'>
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
             &#160;
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
             &#160;
             <data:post.commentRangeText/>
             &#160;
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
             &#160;
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
           </span>
         </b:if>
   
         <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>
   
         <b:if cond='data:post.commentPagingRequired'>
           <span class='paging-control-container'>
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
               <data:post.oldestLinkText/>
             </a>
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
               <data:post.olderLinkText/>
             </a>
             &#160;
             <data:post.commentRangeText/>
             &#160;
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
               <data:post.newerLinkText/>
             </a>
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
               <data:post.newestLinkText/>
             </a>
           </span>
         </b:if>
   
         <p class='comment-footer'>
   
           <b:if cond='data:post.embedCommentForm'>
             <b:include data='post' name='comment-form'/>
           <b:else/>
             <b:if cond='data:post.allowComments'>
               <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
             </b:if>
           </b:if>
   
         </p>
       </b:if>
   



8. Hapus kode diatas, lalu ganti dengan kode berikut:
   
   

   <b:includable id='comments' var='post'>
   
     <div class='comments' id='comments'>
       <a name='comments'/>
       <b:if cond='data:post.allowComments'>
   
   <div id='bg_commentblock'>
   
   <h4>
   
   Komentar :
   
      </h4>
   
      <div id='commentblock'><!--commentblock-->
   
   <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
           <b:else/>
              <strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
           </b:if>
   
         <dl class='commentlist'>
           <b:loop values='data:post.comments' var='comment'>
             <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
               <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>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
               <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></span>
             <dd class='commenttext'>
               <b:if cond='data:comment.isDeleted'>
                 <span class='deleted-comment'><data:comment.body/></span>
               <b:else/>
                 <p><data:comment.body/></p>
               </b:if>
             </dd>
           </b:loop>
         </dl>
         <b:if cond='data:post.commentPagingRequired'>
           <span class='paging-control-container'>
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
               <data:post.oldestLinkText/>
             </a>
             <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
               <data:post.olderLinkText/>
             </a>
             &#160;
             <data:post.commentRangeText/>
             &#160;
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
               <data:post.newerLinkText/>
             </a>
             <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
               <data:post.newestLinkText/>
             </a>
           </span>
         </b:if>
   
         <p class='comment-footer'>
   
   <b:if cond='data:post.embedCommentForm'>
   
   <b:include data='post' name='comment-form'/>
   
   <b:else/>
   
   <b:if cond='data:post.allowComments'>
   
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
   
   </b:if>
   
   </b:if>
   
   </p>
       </div><!--end commentblock-->
   
   </div>
       </b:if>
   



9. Klik tombol Simpan Template;
10. Selesai.

Lihat hasilnya, jika gagal, Anda dapat mengupload kembali template yang sudah di back-up, dan periksa kembali kesalahan-kesalahan dalam penempatan kode HTML. Jika berhasil tentunya kode HTML diatas tidaklah mutlak harus seperti itu, jika sedikit familiar dengan css maka kita bisa memodifikasinya dan disesuaikan dengan kebutuhan template blog yang digunakan.

Misalnya pada bagian lebar kolom komentar, harus disesuaikan juga dengan lebar kolom komentar sesuai template yang digunakan, dengan cara mengubah lebar kolom komentar di atas. Tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.

Begitupun dengan warna Kolom Komentar, dapat disesuaikan dengan warna utama template yang kita gunakan. Untuk mengganti warna Kolom Komentar, edit pada CCS, cari kode yang ada tulisan: background: #dde28f, kemudian sesuaikan dengan warna utama template yang kita gunakan.

Ganti juga gambar di CSS dengan latar warna yang sesuai pilihan di kolom komentar. URL link gambar terdapat di .commenttext dan .commenttext-admin CSS diatas.

Selamat berkreasi memodifikasi kolom komentar. Semoga bermanfaat.