Cara Memodifikasi Threaded Comment Agar Tampil Lebih Keren tidak terlalu sulit,sobat hanya perlu mengikuti langkah-langkah pendek dibawah ini untuk menjadikan threaded comment di blog sobat terlihat keren dan stylist.
- Pertama loggin ke blogger
- Setelah itu pilih"Opsi lainya">>Template>>Edit HTML>>Lanjutkan.(Jangan lupa centang Expand Template Widget).
- Setelah itu cari kode ]]></b:skin> (gukanan Ctrl+F agar lebih mudah mencarinya)
- kalo udah ketemu copas kode dibawah ini tepat diatas kode ]]></b:skin>
#comments-block .avatar-image-container img {background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpN1oyfXBJZRiJR6bEr9qiBvw2JC3vfhet33SoI7hLMLaQsV9L6TOAZsp-xe0MEaziyFEn0baAqzWwGybhG8HYnGQuSaEfHulu9V-9Dxjdi7hYDK69l3vGx7by863jvxj2yFVe4VSTg/s200/anonim-c.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {
margin-left:-5px;
}
.comments .continue a{
color:#069;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbuoZeq13et9wx8Fw4t0yBeA-YmEkaJrOnBdXGsV2MKmvdMn0VJHiZoENkjLexXKK1n2BVRzNOhn5VqOy125fmQX2Dm9WPZsn4tXQCTBXUXrXgxgIf6A5Jydo6UuMmMaV4DVzJIpjG_U/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #cccccc;
border-left:3px solid #069;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {
transform:scale(1.5) rotate(3600deg) translate(0px);-moz-transform:scale(1.5) rotate(3600deg) translate(0px);-webkit-transform:scale(1.5) rotate(3600deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 2.5s ease;-webkit-transition:all 2.5s ease
}
5.Pratinjau dulu kalo sukses baru di"Save template".Setelah itu cek dan lihat hasilnya.
Cara membuat kotak admin berbeda pada komentar
Caranya adalah :
1. Klik Template > Edit HTML > Lanjutkan
2. Cari kode < /body> gunakan CTRL + F untuk mempermudah pencarian
3. Lalu paste kan kode ini sebelum kode < /body>
<script src='http://code.jquery.com/jquery-latest.js'/>
<!--admin comment -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSywE5E6OFBJOQvKQqffqggma_2_n_FjoUCHZKn_5YuqHR8kBDctp0S9zaphrHRpVbuBqZscdOgyqxXVmKHKF4YhyphenhyphenZrfAeheEYU9daBTAweaiurMQcuD23LxTVssxzL6wtc8lHjZiYGg/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- admin comment end-->
4. Klik Simpan > Tutup
5. Gampang kan ? Sekarang kamu liat deh hasilnyaa :D
Catatan :
- Untuk mengubah border silahkan edit pada bagian code ini 1px solid #e1e1e1
- Untuk mengganti warna Background, ganti kode ini #f1f1f1 dengan kode warna HTML yang Anda inginkan.
- Untuk mengganti atau mengahapus tulisan Admin, sliahkan ganti URL gambar inihttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSywE5E6OFBJOQvKQqffqggma_2_n_FjoUCHZKn_5YuqHR8kBDctp0S9zaphrHRpVbuBqZscdOgyqxXVmKHKF4YhyphenhyphenZrfAeheEYU9daBTAweaiurMQcuD23LxTVssxzL6wtc8lHjZiYGg/s1600/admin2.png
