Membuat Kotak Komentar Blogger Menjadi Lebih Keren

Apa kabar sobat semua, sebelumnya saya minta maaf karena beberapa kesibukan yang membuat saya lama tidak menyapa sobat semua. Pada kesempatan kali ini, saya akan berbagi tutorial bagaimana cara merubah tampilan kotak komentar blogger agar terlihat lebih keren kepada sobat semua.

Seperti yang sudah kita ketahui bahwa blogger sudah lama telah menambahkan fitur threaded comment system yang merupakan sebuah sistem terbaru kotak komentar di blog. Namun untuk masalah tampilan masih sangatlah sederhana.

Bagaimana sih caranya agar tampilan kotak komentar menjadi lebih menarik ?

Nah, bagi sobat yang ingin tampilan kotak komentar pada blognya terlihat lebih menarik dan keren, langsung saja silahkan sobat ikuti beberapa langkah di bawah ini :

Silahkan sobat Login ke akun blogger yang sobat miliki
Pilih menu tema > Edit HTML
Pastikan template yang sobat gunakan telah menggunakan fitur threaded comment system. Silahkan sobat cek dengan cara mencari kode di bawah ini :
```
<b:include data='post' name='threaded_comments'/>
```
Jika sudah silahkan sobat cari kode ]]>

Lalu copy dan paste kan code di bawah ini tepat di atas kode tersebut.

.comments h4 {
    font-size: 16px;
}
.comments .avatar-image-container {
    max-height: 50px;
    width: 50px;
}
.comments .avatar-image-container img {
    border-radius: 50px;
    border:3px solid #dadada;
    width: 40px;
    height: 40px;
    margin-right: 100px;
    max-width: 50px;
}
.comments .comment-block{
    border: 1px solid #dadada;
    background: #fdfdfd;
    padding: 10px;
    font-size: 14px;
    border-radius: 10px 0px 10px 0px;
    margin-left: 60px;
}
.comments .comment-block::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -14px;
    top: 16px;
    border: 7px solid;
    border-color: transparent #fdfdfd transparent transparent;
}
.comments .comment-block::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 15px;
    left: -16px;
    border: 8px solid;
    border-color: transparent #dadada transparent transparent;
}
.comments .comment-header,
.comments .comments-content .comment-thread,
.comments .continue a {
    font-size: 14px;
}
.comments .comment-header {
    background: #37988e;
    padding: 5px;
    border-radius: 10px 0px 0px 0px;
}
.comments .comment-content {
    font-size: 14px;
}
.comments .comments-content .comment-content {
    margin-bottom: 10px;
}
.comments .comments-content .datetime{
    font-size: 12px;
    float:right;
    margin-right: 10px;
    padding-top: 5px;
}
.comments .comments-content .user {
    font-style:normal;
    font-weight:bold;
    font-size: 16px;
}
.comments .comments-content .user a,
.comments .comments-content .datetime a {
    color: #fff;
}
.comments .comment .comment-actions a {
    margin-top: 30px;
    background: #37988e;
    color: #fff;
    padding: 5px;
    margin: 3px;
}
.comments .continue a {
    display:inline;
    background: #37988e;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-weight: normal;
}
.comments .continue a:hover {
    text-decoration: none;
    background: #277971;
}
.comments .comment .comment-actions a:hover{
    text-decoration: none;
    background: #277971;
}

Langkah terakhir ialah klik Save untuk menyimpan perubahan.

Setelah semua langkah di atas sudah sobat ikuti, sekarang silahkan sobat lihat perubahan yang terjadi pada kotak komentar sobat, oh iya bagi sobat yang tidak ingin menampilkan tanggal komentar, silahkan sobat ganti kode :

.comments .comments-content .datetime{
    font-size: 12px;
    float:right;
    margin-right: 10px;
    padding-top: 5px;
}

dengan kode di bawah ini :

.comment .comments-content .datetime {
    display: none;
}

Segitu dulu tutorial kali ini. Jika ada pertanyaan, mari berjumpa pada kolom komentar di bawah. Semoga bermanfaat!.

Membuat Kotak Komentar Blogger Menjadi Lebih Keren

Comments