Cara Membuat Komentar Stylization dengan CSS di Blogger

 

Cara Membuat Komentar Stylization dengan CSS di Blogger

Cara Membuat Komentar Stylization dengan CSS di Blogger - Pernahkah kamu melihat postingan blogger yang menampilkan komentar utama dan komentar balasan yang terlihat lebih profesional. Pada kesempatan kali ini kita akan melakukan percobaan dengan hal tersebut.

Untuk cara yang akan saya berikan pada kesempatan kali ini kita menggunakan kode CSS, menurut saya dengan tampilan komentar yang menampilkan komentar utama dan balasan komentar akan membuat pengunjung lebih betah berada di blog kita.

Panduan ini saya mendapatkan refrensi dari situs luar dan saya akan membagikannya untuk teman teman semua dengan bahasa yang mudah untuk di mengeti.

Cara Membuat Komentar Stylization dengan CSS di Blogger

Untuk penerapan cara ini sangatlah mudah, kamu hanya perlu melakukan copy paste kode yang saya berikan dan mengikuti langkah-langkah memasangnya. Ok langsung saja kita masuk kecaranya :

1. Pertama kita masuk di Dashboard Blogger

2. Selanjutnya klik pada Menu Tema lalu klik Edit HTML

3. Kemudian cari kode ]]><b:skin> untuk lebih mudah gunakan fitur pencarian dengan tekan tombol CTRL+F di keyboard

Cara Membuat Komentar Stylization dengan CSS di Blogger

4. Copy paste kode dibawah ini tepat berada diatasnya.

/* Blogger threaded comments (system) stylization with CSS code
by RUi MYID (https://www.rui.my.id)
-----------------------------------------*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#eb1e1e}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://www.techprevue.com/wp-content/uploads/2013/07/red-author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}

5. Kemudian Klik Simpan

Bagaimana cukup mudahkan untuk melakukannya, akan tetapi untuk saat ini sebenarnya sudah banyak template blogger yang menggunakan fitur ini.

Demikianlah artikel Cara Membuat Komentar Stylization dengan CSS di Blogger yang dapat saya sampaikan semoga bermanfaat dan menambah pengetahuan kita semua semua. Sekian dari saya terimakasih telah berkunjung ke RUi MYID.

Tidak ada komentar untuk "Cara Membuat Komentar Stylization dengan CSS di Blogger"