Cara Membuat Kolom Komentar Jadi Keren di Blogger

Artikel kali ini saya akan membagikan cara membuat kolom komentar jadi keren di Blogger. Sebagai contoh, saya akan menggunakan template LinkMagz atau VioMagz. Jadi buat kamu yang ingin mengganti kotak komentar blog menjadi keren wajib ikuti sampai selesai 👌

Mumpung masih ingat, gara-gara kemarin baru saja melakukan upgrade template LinkMagz ke versi terbaru. Jeleknya kolom komentar Blogger versi terbaru adalah adanya tombol 'Hapus' yang semestinya hanya bisa di-klik oleh Admin blog, serta tautan 'Balasan' yang menggangu pemandangan.

Dengan mengikuti tutorial ini, tombol 'Hapus' akan hilang jadi komentar yang masuk harus dihapus secara manual melalui panel Dashboard. Tampilan kotak komentar kamu akan menjadi lebih menarik, simpel, dan tentunya semakin mudah digunakan. Yuk, kita ikuti sama-sama...

1. Langkah pertama tentu saja masuk ke Dashboard Blogger masing-masing. Masuk ke menu Theme - Edit HTML lalu carilah ]]></b:skin>. Kemudian tambahkan script berikut di atasnya :

   #comments .comment .comment-actions .item-control{display:none}

2. Sekarang cari ini baris script ini :

   .comments-threaded .thread-toggle {
       display: inline-block; }

   ganti dengan kode berikut :

   .comments-threaded .thread-toggle {
       display: none; }

3. Lanjut sekarang mencari :

   .comments-threaded .continue a {
       display: inline-block;
       font-size: 13px;
       font-size: .8125rem;
       font-weight: bold; }

   ganti dengan ini :

   .comments-threaded .continue a {
       display: none;
       font-size: 13px;
       font-size: .8125rem;
       font-weight: bold; }

4. Sampai disini sebenarnya tampilan sudah menjadi lebih baik. Tombol 'Balasan' dan 'Hapus' sudah hilang. Tapi jika kamu ingin membuatnya lebih menarik, yuk coba kita ganti tombol 'Balas' yang ada.
5. Carilah script berikut :

   .comments-threaded .comment .comment-actions a {
       display: inline-block;
       font-size: 13px;
       font-size: .8125rem;
       margin-right: 8px; }

   lalu ganti dengan ini :

   .comments-threaded .comment .comment-actions
     a {
         display: inline-block;
         font-size: 13px;
         font-size: .8125rem;
         padding: 3px 10px 3px 7px;
         background-color: $(navmenu.background.color);
         color: #fff;
         border-radius: 25px}
   
     #comments .comment .comment-actions>:before {
         content: '';
         margin-right: 5px;
         min-width: 13px;
         min-height: 13px;
         display: inline-block;
         vertical-align: -3px;
         background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;
         transform: rotate(180deg);
         transition: all .3s ease }
     #comments .comment .comment-actions>:hover {
         color: #636363;
         background-color: transparent }
     #comments .comment .comment-actions>:hover::before {
         background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z' fill='%23636363'/%3E%3C/svg%3E")}
   

6. Naah, sebagai langkah terakhir kita atur agar foto profil komentator / avatar tampak matching dengan desain komentar yang baru. Carilah baris kode ini :

   .comments-threaded .comment .avatar-image-container {
         background-color: rgba(199, 199, 199, 0.2);
         border-radius: 20px;
         float: left;
         max-height: 36px;
         overflow: hidden;
         width: 36px;
         height: 36px;
         background-repeat: no-repeat;
         background-position: 8px 7px; }
   .comments-threaded .comment .avatar-image-container {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAC4jAAAuIwF4pT92AAAC4UlEQVR42nWU30uTYRTHn/d1bjOn5Y0Gu4mBNhWZ4EVXbiMUMVMjL2L+iJSYCMJkF27TzanbdNvfEN10U3STFdV/0GUE3faLsJsovEkIhDqfsWc8vqOLw87O+X6/73nOOc+jdnd3VT6fP2fZbNZVrVbV+vr61f7+/mdKqb+Y+EfEyIFx8tBqODqYy+WsQqGgpqen411dXR+7u7s/DAwMPMHwiZEDA9YU47fh8KvFxsfH0y6X63RycjKZTqcv7ezsWBg+MXJgtKipca6y/f19tby8HLZt+08sFps6PDxUIqS0ID4xcmDAwjErbQgCLhaLqq+v7/ng4ODjUqmktre36ZNl9MkiRg6MYI/gwG0IUiaBvb09lclkLvh8vq9zc3N3hGTJl1t0Hqu3pYUcGLBw4Op8Q5nSk8nk5fb29u9LS0vXqULItnOSxMiBAQsHblOF/MpxPB0dHZ9nZ2fvylEsWY2mComRAyPYT3BMjaYeDg0NPQoEAm/wIUvcNjB2XVCBAdvUQwNcm/La2lqotbX1dGZm5n65XFa6P7rPxMgJ5jdYOHDPHdncQwBynHttbW0/wuFwaWNjI7C1teXB8CORSIkcGL0yTXuIowWpgl1jcbluHo/npKen5x2GT4wcGLBasHFTjPtbm57c1WBvb+9rafix7NmL0dHR0sTERALDJybrcgwGLBy4eg66Mvvg4EDNz8/f9nq9v4T0cnV1dQQQcarB8InF4/ERhMHCIa5XTElvapu/sLBwy7Kss7GxsTSTq0+P5baZLlb3LZ2Xo6fgwOU/S08f7EQiEZCv/YxGozmm6FwXp+n1AQsHrgzsCh9TlUpFhUKhh36//219arbzjTPNeWt4ceAODw8/4KRqZWXlmgzgm/TiZr1s2/nGmWKOt7MmKNwbbrf7hMqVTOuVPJzvNzc3L5q3xlmZ08zbkUqlfJ2dnV8WFxenFHvFU6TfOxP4PzHzw/q9DAaDT2VPz/4BM3gzfN9VWhwAAAAASUVORK5CYII=");
     }
   

   Hapus semua lalu ganti dengan ini :

   .comments-threaded .comment .avatar-image-container {
         float: left;
         max-height: 36px;
         overflow: hidden;
         width: 36px;
         height: 36px;
         background-repeat: no-repeat;
         background-position: 8px 7px;
         padding-top: 15px }

7. Klik tombol 'Simpan' lalu lihat hasilnya.

Sampai disini tutorial cara membuat kotak komentar yang keren di Blogger dengan template LinkMagz sudah selesai. Apabila kamu mengalami kesulitan atau kegagalan, jangan sungkan untuk bertanya di kolom komentar. Salam 🙏