Modifikasi Thread Comment Dengan CSS
Selamat sore sobat Kolom Tutorial™, gimana masih pada semangat kan.....???Harus semangat terus tentunya sob, setelah sebelumnya kita membahas tentang Modifikasi Label Blog Dengan CSS3 selanjutnya kita akan membahas tentang Bagaimana Cara Memodifikasi Thread Comment Dengan CSS, Seperti pada ngambar dibawah ini gan :
1. Seperti biasa Login ke akun Blogger Sobat
2. Klik "Template"
3. Klik "Edit HTML"
4. Klik ""
5. Kemudian Cari kode ]]></b:skin> Gunakan Ctrl + F untuk mempercepat penbcarian, jika sudah ketemu letakan kode "CSS" Dibawah ini Tepat Diatas Kode ]]></b:skin>
#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:#2630E3}
#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 #2630E3;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:#2630E3}
.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/AVvXsEjbKuIoU_4r0bEZzAbsI7ljej35J8rPOBUvpXJFEFqSvllBEwL1qu0Rk7bQGhbta6GPtq24IEsl5anL5SWVDj7F7rD06FoaWE9FDihVd-SyuOrdt_lKsUJpghRhRZl9iu2jrdfUr1rX9Gio/s1600/author-Biru.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%}
6. Klik "Save Template"
Note :
Untuk mengganti Background Image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKuIoU_4r0bEZzAbsI7ljej35J8rPOBUvpXJFEFqSvllBEwL1qu0Rk7bQGhbta6GPtq24IEsl5anL5SWVDj7F7rD06FoaWE9FDihVd-SyuOrdt_lKsUJpghRhRZl9iu2jrdfUr1rX9Gio/s1600/author-Biru.png silakan sesuaikan dengan Url Gambar dibawah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKuIoU_4r0bEZzAbsI7ljej35J8rPOBUvpXJFEFqSvllBEwL1qu0Rk7bQGhbta6GPtq24IEsl5anL5SWVDj7F7rD06FoaWE9FDihVd-SyuOrdt_lKsUJpghRhRZl9iu2jrdfUr1rX9Gio/s1600/author-Biru.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1q6WZhZ4BP_H_zczH608f6lJ8CDT97FlUrdoUTrt73y_qhySTh1CIgvCnofPoQLozJJ2BY26C-IR7KMbte-AhgKPqVzh2sqr-KW5U2-k3PTtlZicwgy0wDO2pkvFqg10WvGVU4WpSMFI/s1600/author-Black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHw7BlEITg_YVxfOk3C76RfRn1X6ABzX_BLRLE6u8dU6RAZitwyFD6aGVYdZMKF4Xx4uR9xn7j3btjNQdMUAZJzJXjH1Fqf9MB1R2ryXPdQ76SxTslkJfGWHb-fZD9mOzwwXb7Em71u4z/s1600/author-Hijau%20Muda.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixLeFzoaGEoK43yy9JDymCefpw2vr8x8Aa3ej7-Aq2Yntg3TJVCA4CZ_AmSrF5s3kYc0xGcpKLc2XGtO9fUoiqbEoQsBN7yoOYAp3ZIPjCA_I0Zf6UTh3enl7OGp89Co6RefmlIY6mdpz6/s1600/author-Merah.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmVxSh-x5nGECKdBFeDdC4RXIxNCaEXs3C7H_ewdRUMVF2Ary688iFFgb2Xuc-xKp9VVl23KoCsILUaEMGvqEf6aIQyYVKAZ-nwH3dgh71ZwPU3ocdtfwSG7iltmxd2ZkHzAu8PTUSE3W/s1600/author-Ungu.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtYM8U5n7JUYag6KEofbndvpZnoZJPz535AQjIRbtJgh5yWZ3xzlU6_yaEwSalCiY5ZsBvainDXD_70gnUXV9TVE4nvkelw-wiAGrpapZv1ZP0IRURvPKeV8SUERucT9M_h9KXXFdVHqZ/s1600/author-pink.png
Dan Untuk mengganti Warna Comment Dan Nama Penulis Silakan diganti kode #2630E3 Sesuai Selere sobat Untuk kode Warna silakan Klik "DISINI"
Selesai and happy blogging........................
Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.
Tutorial menarik neh sahabat .. aku coba dah hehe ..makasih ya
ReplyDeleteSilakan Mas, terimaksih atas kunjungannya
Deletekemarin saya pengen coba biki sendiri, tapi gagal trus gan, eh saya liat disni ada turialnya,
ReplyDeleteoh iya gan kalau itu tulisan author mw bikin sendiri gimana caranya yah?
Mas @Reki, Terimaksih untuk kunjungannya,
Deleteuntuk mengganti tulisan autornya, berarti mas reki harus edit gambarnya dulu,
silakan mas ambil gambarnya kemudian mas edit pake Potoshop terus di upload dan masukan link gambar yang udah di edit tersebut.
hm, gitu yah sob, terima kasih atas penjelasannya sob, sukses selalu.
Deletekeren sob, patut untuk dicoba dah
ReplyDeleteSilakan mas, terimaksih atas kunjungannya
DeleteNice for sharing sobat...
ReplyDeletethanks ya udah share nfonya Insya Allah bermanfaat
apa lagi buat pemula spt ane nie yg baru kenal dunia blogging...wajib dicoba nie... :)
makasih juga gan atas kunjungannya, jangan gitu ah, apalagi ane gan di dunia blogger baru anak kemarin sore.
Delete.: TQ tutorialnya kawan, kebetulan thread komen saya sedikit error gara2 modifikasi template...^_^
ReplyDeleteSama2 mas, thank juga atas kunjungannya.
Deletesaya request donk, itu kan modifikasi author, khusus untuk para komentator bisa nggak di buat seperti itu tapi gambarnya bertuliskan komentator (khusus para komentator)
ReplyDeleteBisa Mas, silakan dimodifikasi aja url image nya, mungkin dengan potoshop.
Deletegimana cara settingnya mas, untuk komentar ada tulisannya ada tulisannya visitor, kana authornya bales kan ada itu ada gambar Author
Deletetemplate saya coba pake ini gak bisa.
ReplyDeletemungkin perlu di delete dulu css comment yang lama, tapi kalau mau lakukan itu sebaiknya template mis backup dulu takutnya gagal.
Deletetutorial ini sudah sy terapin di blog saya mas. terimakasih yah? eheheh
ReplyDelete