Download Panduan Lengkap dan Script Hack Facebook dan Instagram di sini
Beranda
Tutorial Blogging

Cara Membuat Kotak Komentar Menjadi Lebih Cantik Dan Menarik Pada Blogger

cara mempercantik Desain Blog kamu dengan Merubah Tampilan Komentar pada Blog kamu.. Agar Para pengunjung lebih terkesan dengan desain Blog yang kamu miliki
Cara Mempercantik Tampilan Komentar Pada Blogger

 Rumah_Thalib-Halo sobat Thalib, jumpa lagi dengan saya di Blog yang sederana ini. Pada kesempatan kali ini saya akan memberikan sebuah ilmu tentang Blog lagi sob. Ilmu yang akan saya sampaikan adalah tips cara merubah tampilan komentar pada Blog agar lebih cantik dan keren. Dengan desain Blog kamu yang menarik, maka pengunjung pun akan merasa nyaman berlama-lama di Blog kamu. Berbeda jika desain Blog kamu itu hanya desain default, maka pengunjung pun tidak terlalu terkesan dengan Blog yang kamu miliki. Komentar yang saya maksud ialah seperti gambar dibawah ini.
Sumber Gambar : kangjaz.com

Pada pembahasan atau Cara ini sebenarnya sangatlah mudah sob. Tapi bagi kamu pengguna baru dari Blogger dan sama sekali masih belum paham mengenai ilmu programer seperti HTML, CSS ataupun JavaScript kode, kamu nggak perlu khawatir sob. Karena cara ini tidak perlu terlalu paham dalam bidang tersebut. 

Kamu hanya perlu ambil kode yang sudah saya sediakan didalam artikel ini, kemudian paste kode tersebut ke dalam Blog kamu. Kamu masih bingung atau belum tahu tempat meletakan kode tersebut? Tenang sob, saya akan ajarkan kamu semua sampai sukses. Sebelum saya lanjut ke Tips-nya, saya akan menjelaskan suatu  hal penitng terlebih dahulu kepada sobat, apa yang harus dilakukan terlebih dahulu sebelum kamu memasang kode ini. Berikut adalah penjelasannya.

Seperti yang sudah kita ketahui bersama, 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. Maka dari itu saya akan memberikan trik cara untuk merubah tampilan komentar Blog. Simak Trik dibawah ini dengan baik dan benar.


Cara Merubah Tampilan Komentar Blog Agar Lebih Menarik Dan Cantik

1. Silahkan sobat Blogger masuk terlebih dahulu ke Akun Blogger sobat.
Sebelum kamu lanjut ke trik yang satu ini, sebaiknya sobat BackUp telebih dahulu template yang sedang sobat gunakan. Agar, jika terjadi kesalahan bisa diperbaiki.

2. Pilih menu Tema ---> Edit HTML

3. Pastikan template yang sobat sudah menggunakan fitur Threaded Comment System. Sobat bisa cek dengan cara mencari kode di bawah ini :

<b:include data='post' name='threaded_comments'/>

 Jika Kode diatas sudah ada di Blog kamu, lanjut  ke langkah yang berikut ini.

 4. Cari kode  ]]></b:skin> dan masukan kode yang saya taruh dibawah ini tepat diatas kode ]]></b:skin>
.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;
}

5. Jika  kode diatas sudah sobat paste-kan di template sobat, kemudian Save Temanya. Kemudian lihat hasilnya.

 6. Selesai.

 Nah sob, itulah trik yang dapat saya sampaikan pada  kesempatan sore hari ini. Semoga bisa bermanfa'at bagi sobat Blogger semuanya. Jangan lupa untuk Share artikel ini kepada teman-teman sobat semua.

Kalau sobat ada pertanyaan mengenai artikel ini, silahkan komentar saja dibawah. Atau kirimkan sebuah Email kepada AdMin Blog langsung.

 ---> Kirim Pertanyaan Anda Via Email : Disini
---> Subscribe Blog Rumah_Thalib : Disini
---> Follow My Social Media : Follow Here!