Menjadikan Kolom Komentar atau Reply Komentar Blogger Lebih Menarik

Dengan dimasukannya fitur thread comments oleh blogger, maka penampilan kolom komentar sedikit berbeda, untuk memperindah kolom tersebut ada tips menarik dari Kang Ismet. Namun ternyata permasalahan terjadi, karena tidak semua tamplate itu sama, maka ada beberapa template yang kolom reply komentarnya tidak bisa berubah, atau tetap masih seperti bawaan blogger, meski CSS-thread comments sudah berkali-kali diedit. Hal tersebut pernah dialami penulis, setelah beberapa kali bolak-balik menelusuri HTML, akhirnya didapati bahwa penulis tidak memasukan kode
<b:include name='threaded_comment_css'/>

Jadi wajar jika penampilan kolom reply komentarnya masih standar blogger, karena css thread comments-nya tidak terbaca.Uraian diatas mungkin sedikit membingungkan bagi beberapa sahabat blogger (khususnya newbie seperti penulis). Untuk praktisnya sbb: 

1. Masuk ke Rancangan kemudian pilih Edit HTML dan centang Expand Template Widget.
2. Tambahkan Reply Komentar asli blogger. ---untuk tutorialnya silahkan baca disini atau disini
3. Maka hasilnya akan seperti ini :


Karena tampilan tersebut masih sangat sederhana, perlu sedikit perbaikan agar terlihat menarik. Untuk merubah hal itu, silahkan ikut beberapa langkah berikut ini :
1. Cari kode : ----(untuk mempercepat pencarian tekan F3)----
<b:includable id='threaded_comment_css'>      
  <style>
2. Dibawah kode tersebut ada banyak sekali kode-kode css. Maka gantilah kode css ini :
.comments .comments-content {     
  font-size: 13px;     
  margin-bottom: 16px;     
}     
.comments .comment .comment-actions a {     
  padding-top: 5px;     
  padding-right: 5px;     
}     
.comments .comment .comment-actions a:hover {     
  text-decoration: underline;     
}     
.comments .comments-content .comment-thread ol {     
  list-style-type: none;     
  padding: 0;     
  text-align: left;     
}       
     Dengan kode ini :
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
3. Lalu ganti juga kode css ini :
.comments .comments-content .comment-replies {     
  margin-top: 1em;     
  margin-left: 36px;     
}      
     Dengan yang ini :
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
4. Turun sedikit kebawa cari kode css ini :
.comments .comments-content .datetime {     
  margin-left:6px;     
}   
     Ganti dengan yang ini :
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
5. Turun lagi kebawa dan cari kode css ini :
.comments .comments-content .comment-header,     
.comments .comments-content .comment-content {     
  margin:0 0 8px;     
}     
.comments .comments-content .comment-content {     
  text-align:justify;     
}      
     Ganti dengan kode ini :
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
6. Kemudian cari kode ini :
.comments .continue a {     
  display: block;     
  padding: 0.5em;     
  font-weight: bold;     
}     
     Dan ganti dengan kode ini :
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}

7. Terakhir sekali untuk memastikan rancangan tersebut berjalan sempurna, letakan kode ini :
<b:include name='threaded_comment_css'/>
     Tepat di bawah kode
<b:includable id='threaded_comments' var='post'>

8. Setelah itu tekan Simpan Template.
Note : Kode CSS diatas idak mengikat artinya para sahabat blogger bisa mengeditnya menurut kehendak dan selera sendiri. Serta disesuaikan dengan template masing-masing

5 komentar: