KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Membuat Kotak Komentar Blogger Menjadi Lebih Keren

23 April 2018 | Kategori : Tutorial

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.

komentar.png

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 :

1. Silahkan sobat login ke akun blogger yang sobat miliki

2. Pilih menu tema> edit HTML

3. 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'/>

4. Jika sudah silahkan sobat cari kode ]]></b:skin>

5. 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;
}

6. 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;
}

Baik sobat, mungkin cukup sampai sini ya pembahasan cara membuat kotak komentar terlihat lebih keren di blogger, semoga sedikit coretan ini bisa bermanfaat buat sobat semua.

Oh iya sobat, ada sedikit tambahan nih, bagi sobat yang ingin mengubah warna tampilannya menjadi warna lain, silahkan sobat ganti kode warna pada background nya ya. Silahkan Share jika dirasa bermanfaat buat yang lain.. selamat belajar dan berkarya ya sob.