bosan dengan tampilan komentar di blog yang begitu saja??nahh kebetulan admin Web Download akan membahas bagaimana cara menjadikan komentar sobat menajdi lebih keren dan kece, yuk simak terus sampai habis biar ngerti :)

Ini dia Langkah - langkahnya :

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;

Baca Juga !!

}

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

}


Bagaimana mudah sekali bukan???selamat mencobanya terima kasih :)

..Postingan Terkait..