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

6 komentar:

  1. terima kasih sudah berbagi ilmunya nih.. :D

    BalasHapus
  2. terimaksih atas trik nya gan

    BalasHapus
  3. Kontennya Manteb - Manteb Gan. Sukses Selalu.

    Salam Kenal Ya Bradher. Di Tunggu Visit Backnya Gan Visit Back KORAN GRATIS

    BalasHapus
  4. Pengen yang lebih seru ...
    Ayo kunjungi wwwasianbet77com
    Buktikan sendiri ..

    Real Play = Real Money

    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

    BalasHapus