Cara Mudah Mempercantik Tampilan Komentar Blog

Santos el Salam

8 Oktober 2019

Mendapatkan banyak komentar merupakan kebanggaan tersendiri bagi seorang pengelola blog. Selain membangun interaksi dengan pembacanya, saling berkomentar juga bisa menambah ilmu dan sahabat. Dewasa ini beberapa blogger banyak yang beralih mengganti komentar default blognya dengan menggunakan layanan komentar disqus. Tampilannya yang simple nan menarik serta banyak memberikan keunggulan membuat pengunjungnya tertarik untuk memberikan komentarnya. Tidak jarang kolom komentar dijadikan ajang diskusi bagi para pelaku di dalamnya. 

Saya sendiri memang saat ini masih menggunakan komentar bawaan blogspot. Saya tidak tahu kenapa belum ingin beralih menggunakan komentar disqus. Mungkin lain kali jika sudah berminat memasangnya. Untuk saat ini saya masih nyaman menggunakan komentar standar dari blogspot. Namun karena tampilannya yang terlalu sederhana, agar lebih menarik pandangan mata saya percantik tampilan komentarnya agar lebih indah, sedap, mantap dan sejuk dipandang, sehingga pengunjung pun juga akan tertarik untuk ikut memberikan komentarnya. Ada banyak cara untuk menghias tampilan komentar agar lebih menarik, salah satunya yaitu seperti tampilan berikut ini:

Apakah anda tertarik untuk menghias tampilan komentar blog anda menjadi seperti itu?. Jika tertarik anda bisa mengikuti langkah mudah memasangnya berikut ini.

1. Buka akun blogger anda

2. Pilih menu tema dan klik edit html

3. Cari kode ]]></b:skin> dan letakkan kode berikut ini di atasnya.

.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 #37988e; width: 40px; height: 40px; margin-right: 100px; max-width: 50px; } .comments .comment-block{ border: 1px solid #333333; background: #fdfdfd; padding: 10px; font-size: 14px; border-radius: 10px 10px 10px 10px; 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 #000000 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 10px 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 { color: #fff; } .comments .comments-content .datetime a { color: #783c00; } .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; }

4. Klik simpan template dan lihat hasilnya.

Demikianlah Cara Mudah Mempercantik Tampilan Komentar Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Mudah Mempercantik Tampilan Komentar Blog. Please share...!

Facebook

Twitter