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>
.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;
}
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;
}
.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 :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;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;
}
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;
}
.comments .comments-content .datetime {
margin-left:6px;
}
margin-left:6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.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;
}
.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;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
display: block;
padding: 0.5em;
font-weight: bold;
}
.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;
}
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'/>
<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
oke di tunggu feedbacknyay
BalasHapusterima kasih sudah berbagi ilmunya nih.. :D
BalasHapusKeren banget informasinya gan,,
BalasHapusterimaksih atas trik nya gan
BalasHapusKontennya Manteb - Manteb Gan. Sukses Selalu.
BalasHapusSalam Kenal Ya Bradher. Di Tunggu Visit Backnya Gan Visit Back KORAN GRATIS