Tutorial kali ini 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>
.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 :
.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/AVvXsEjHYqhe-CR9wd6dyDX9KxbexaAFiMt5uPfpZI_prrMnCEC0y1oLk-uAj9Ot0a5zsbYzHz5rsCckij8sL9UZTxGRC-1ukDG7dpcJI7YSyQ9Y0rDETHJvdHGpkSyh_Dq9pN7kvuWZbdlvTno/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. Semoga bermanfaat!
Sumber
0 komentar:
Posting Komentar