Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2

Tutorial kali ini sebagaimana janji saya pada postingan Mengaktifkan Threaded Comments Pada Custom Templates Blogger, bahwa saya juga akan mengetengahkan cara memodifikasi tampilan threaded comments blogger baik modifikasi atau custumize threaded comments yang ada menggunakan penambahan atau edit CSS atau dengan penambahan script.
Mengapa kita perlu memodifikasi tampilan threaded comment yang ada karena tampilan defaulth threaded comments blogger sangat simple seperti image berikut:

Maka kali ini dengan sedikit penambahan CSS kita akan merubah tampilan diatas. Ikutilah langkah-langkah berikut:
Modifikasi Threaded Comment Blogger Versi Pertama

• Setelah login ke akun anda, pada sdasbor klik menu template >> edit HTML
• Sekarang cari kode ]]></b:skin> (Gunakan control F untuk memudahkan pencarian)
• Tambahkan semua kode kode CSS berikut diatas kode ]]></b:skin>

Untuk menambahkan border pada kolom komentar tambahkan CSS berikut:

.comment-block {border:1px solid #666;border-radius:8px;padding: 3px;}

Modifikasi reply comments tambahkan CSS berikut:

.comment-actions {
margin-right: -2px;
margin-top: -15px;
font-size: 10px;
text-transform: uppercase;
float: right;
border: 1px #DDD solid;
padding: 3px;
line-height: 1em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.comment-actions:hover {
background: black;
color: white;
}

Sekarang modifikasi image avatar komentator tambahkan CSS berikut:

.avatar-image-container img{border-radius:20px;background: url("http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/apps/personal.png") no-repeat scroll center center;
}

Sekarang reply button dibawah post komentar tambahkan CSS berikut:

.continue{
width: 45px;
font-size: 10px;
text-transform: uppercase;
border: 1px #DDD solid;
padding: 3px;
line-height: 1em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.continue:hover {
background: black;
color: white;
}

Terakhir modifikasi dropdown reply comments tambahkan CSS berikut:

.thread-count{
font-size: 10px;
text-transform: uppercase;
border: 1px #DDD solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.thread-count:hover {
background: black;
color: white;
}

Sekarang setelah mengikuti semua langkah-langkah diatas, tampilan threaded comments anda akan seperti image berikut:

Modifikasi Threaded Comments Blogger Versi kedua

• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

/*=== Threaded Comments ===*/
.comments .comments-content .icon.blog-author {
background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
background-repeat: no-repeat;
width:38px;
height:20px;
}
.comments .comments-content .loadmore a {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 2px;
}
.comments .continue {
margin-top:2px;
border-top: 2px solid silver;
}
.comments .comments-content .datetime a{
float: right;
font-size:10px;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#FAFAFA url(url comment) top repeat-x;
margin:5px auto 0;
padding:5px 5px;
border:1px solid silver;
}
.comment-actions a {
padding:2px 5px;
margin-right:10px;
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;
font: 11px sans-serif;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
background: #EDEDED;
background: linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
}
.comment-actions a:hover {
text-decoration: none !important;
background: #CCC;
background: linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
}
.comments .avatar-image-container {
margin-left:0px;
}
Catatan:

• Selanjutnya untuk membuat tampilan avatarnya menarik, tambahkan CSS berikut di bawah CSS tadi :

/*=== BOX Avatar dan Blank Avatar ===*/
.avatar-image-container {
box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
-webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
}
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwRM-2SdXvmVFThaifpq6DG4Yq7UwejrPiC9vpzYfDWltl2BovdfgRghNgHobSPCd2rKIvArBwWo_k8KunNSbPMcBhdTrQGmdK9W1Epd804DYXeVnWX00mC2PAt3b6WT5F9QCPL4VUDA/s1600/blog-anonim.png);
width:35px; height:35px; border:none;
}
.avatar-image-container img:hover {
transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg);
transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s;
}

• Simpan pekerjaan anda. Maka hasilnya tampilan threaded comments blogger versi kedua ini seperti image berikut;

Demikian tutorial memodifikasi threaded comments blogger versi 1 dan 2. InsyaAllah pada kesempatan lain akan saya posting cara memodifikasi threaded comments blogger dengan penambahan script. Semoga bermanfaat!