Sesuaikan Blogger Komentar Threaded Dengan Cool Gaya Dan Warna

Ini adalah cara lain untuk styling standar komentar blogger dengan warna dingin, dan juga termasuk pita kepada penulis header lain untuk membedakan antara penulis komentar dan pengunjung komentar, tutorial ini saya berbagi dengan Anda adalah dari paul crowe , dan itu desain menggunakan CSS sederhana.



Screenshot :

Terapkan Komentar Threaded Dengan Cool Color

• Pergi ke dashboard Template blogger Anda


• Klik " Edit Html "


• Sebelum memulai sebaiknya anda backup Template anda terlebih dahulu dengan mengklik cadangkan/pulihkan


• Silahkan Anda Cari kode ]]></b:skin> atau tekan (ctrl+f) untuk memudahkan,


• Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>

#comments{overflow:hidden}<br />#comments h4{display:inline;padding:10px;line-height:40px}<br />#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}<br />#comments h4,.comments .continue a{background:#d80556}<br />#comments h4,.comments .user a,.comments .continue a{font-size:16px}<br />#comments h4,.comments .continue a{font-weight:normal;color:#fff}<br />#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}<br />#comments .avatar-image-container img{border:0}<br />.comment-thread{color:#111}<br />.comment-thread a{color:#777}<br />.comment-thread ol{margin:0 0 20px}<br />.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}<br />.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}<br />.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}<br />.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}<br />.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}<br />.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjwiKsqpAgUJQalOSAadwxdsNp-r_swPVlDKNBvgL4vCdM1d9wFp1eTe5ynajJyWEs29eqyh-aG5F-cEfh2HU8O1Sd6ckNZ0w_dNJScHeErGyeneMiLYmJMntKc5EMMjgj3rJnhS_O1I/s320/author-pink.png);width:36px;height:36px}<br />.comments .comments-content .inline-thread{padding:0 0 0 20px}<br />.comments .comments-content .comment-replies{margin-top:0}<br />.comments .comment-content{padding:5px 0;line-height:1.4em}<br />.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}<br />.comments .comment-thread.inline-thread .comment{width:auto}<br />.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}<br />.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}<br />.comments .comment-thread.inline-thread .comment-block{margin-left:48px}<br />.comments .comment-thread.inline-thread .user a{font-size:13px}<br />.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}<br />.comments .continue{border-top:0;width:100%}<br />.comments .continue a{padding:10px 0;text-align:center}<br />.comment .continue{display:none}<br />#comment-editor{width:100%!important}<br />.comment-form{width:100%;max-width:100%}<br />

Kustomisasi

• Untuk mengubah warna nama dan kotak komentar counter, kemudian ganti # d80556 dengan warna hex pilihan Anda, periksa disini untuk 100 tentang warna hex.


•  Untuk mengubah latar belakang pita / Author, cukup mengedit kode dibawah ini,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjwiKsqpAgUJQalOSAadwxdsNp-r_swPVlDKNBvgL4vCdM1d9wFp1eTe5ynajJyWEs29eqyh-aG5F-cEfh2HU8O1Sd6ckNZ0w_dNJScHeErGyeneMiLYmJMntKc5EMMjgj3rJnhS_O1I/s320/author-pink.png



dan ganti dengan kode dibawah ini

• Green Ribbon

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQckh6TbI816DtUOWGTi4M_jUHkik3ATNNIDiOzfiv4JKPF6L8NgY7M_CFuNqPOpu6KFnrpllfqQ98fxzmZ78j0U6IYpGyUlY7Mo70xFOCPnFlO2pC2Ao7DE-4pN4RlY8MQYm_lxMMuDl/s1600/rb+green+ribbon.gif

• Blue Ribbon

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr9sCUvaxQ8RqOebkLK9-TvpNh4T9FotWb67Gg4zj-wwz2ti57UtDaN9StmOJA3xNaw5DH4vnDDnU3HFmXGPPbaQHmAsds6VUfKSaNObzpL4cRHL8BkG1pGcO0F31woXCQM8MyMDwmPJ2/s1600/rb+blue+ribbon.gif

Klik " Simpan Template "dan lihatlah apa yang terjadi dengan tampilan comment baru anda

Sekian semoga bermanfaat

Posted in Tips Blogging, Tips Dan Trik