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/AVvXsEhuFbdsM664Y2bbj4ObnTGCP_MWmyI-E2iKAj34GoQOmUBciOhQcDIFm5JRLYH_8XTt-q7ln5Je53IJJD8wWEEqkIvdKo0TONFrEXcpbaqw0qswPM5cxd9S7DlKTjjVGt0Bf9wPna3DF6k/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!
0 Komentar untuk "Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2"