Kotak Komentar Bergaya Warna Dengan CSS3 Di Blog

Screenshot Gaya Warna CSS3

Flamboyan68 - Pada saat sobat membaca artikel di sebuah blog, sobat semua pasti akan akan menjumpai yang namanya kotak komentar yang disediakan khusus bagi pembaca atau pengunjung untuk meninggalkan komentar sebagai respons terhadap artikel tersebut. Komentar blog salah satu bagian penting dari blog,  pengunjung bisa menyuarakan opininya pada postingan artikel di blog. Manfaat komentar blog bagi blogger ibaratnya darah bagi sebuah blog hehehe..pilosofis banget.  Dengan mendorong pembaca blog untuk meninggalkan komentar serta memberikan respons yang cepat terhadap komentar yang ditinggalkan oleh pembaca sobat sehingga mereka merasa dihargai. Ibaratnya anda tidak suka ketika diabaikan apabila anda menyapa seseorang, maka jangan mengabaikan pembaca blog anda ketika mereka menyapa anda melalui sebuah komentar.

Maka untuk postingan kali ini saya akan berbagi dengan sobat semua tentang memperindah kotak komentar dengan gaya warna komentar blogger. Gaya Warna Komentar Blogger ini menggunakan kode-kode CSS3 untuk bisa menghiasinya dengan warna yang cukup beragam, dan terdapat 3 warna. Fitur yang terdapat pada komentar ini adalah terdapat nomor komentar yang diterbitkan, 3 Gaya warna sebagai penghias komentar, dan Pita Pemilik blog yang muncul jika sobat semua berkomentar terletak di atas kanan.

Apabila sobat semua tertarik bisa mengikuti cara dan langkah di bawah ini :

* Masuk ke akun Dashboard Blogger sobat.
* Kemudian klik menu Template  >> seperti biasa backup dulu template sobat guna menghindari kegagalan  pasang.
* Lalu klik >> Edit HTML.
* Dan sobat cari kode ]]></b:skin> untuk mempermudah pencarian gunakan CTRL+F.
* Setelah ketemu kode tadi, masuk Kode dibawah ini tepat diatas kode ]]></b:skin> :

1. Kotak komentar bergaya warna biru :

Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/

#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:#1e05d8}

#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 #1e05d8;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:#1e05d8}

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsCntPfDf0wE-bAKYGcwzYMsBJl66uy1bY2UhoSwF7vhZNzFMgwkvojjWRoSL4vw2phC4IOd_JAij1Zyd_o-ERYs3Yn3PzK4M_KjK7C4oRmCYWcwuSqYiog5_O1ElSGgl0eJZOAwH1m58/h120/pita+berwarna+biru.gif);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:103%!important}

.comment-form{width:100%;max-width:100%}

/*End Blogger Threaded Comments Stylish Colors*/

2. Kotak komentar bergaya warna merah muda :

Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/

#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:#d80556}

#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 #d80556;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:#d80556}

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsgSzm9Tu8QqLRfWX1e2Ed-v1SLVBYHRqrET6KzoZxQsWRhY5Ad_INBhahA8m4F0wYW0hxEPIbV2ny_ZjTelSvQ69Pgb_X7yaebg_RADi4L9-MJY0DoAbLBjryFR6auQn8o0iCniH9-M8/h120/pita+berwarna+merah+muda.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:103%!important}

.comment-form{width:100%;max-width:100%}

/*End Blogger Threaded Comments Stylish Colors*/

3. Kotak komentar bergaya warna merah muda :

Masukan Kode Berikut ini:

#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:#56d805}

#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 #56d805;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:#56d805}

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d5nbv5c2n5Gkqd1BBipppPZu4gKMMiualsbmdEnm8JL0miFB00wLrpp8sT4gbJ_GsSRCGU3lXEj2s16IuUw-d1cPRbPQBz2kqARv6puiqBSzMSckykweaeshrZpLIrsQyAhDiT8Jy5vT/h120/pita+berwarna+hijau.gif);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:103%!important}

.comment-form{width:100%;max-width:100%}

* Terakhir Simpan / Save Template. Lebih bagusnya sobat Pratinjau dulu sebelum di simpan/save.

Selamat mencoba dan semoga bermanfaat....

http://your-belajarblog.blogspot.com/2013/06/cara-menambahkan-gaya-warna-dengan-css3.html