Tutorial Ubahsuai Threaded Comments Box Di Blogspot

As-salam,

Sudah lama saya tak buat tutorial untuk korang semua. Sebabnya, saya akan hanya buat tutorial jika saya dah guna dan ubahsuai sesuatu kod/template itu menjadi. Yang terbaru, saya cuba ubahsuai threaded comment box yang pada awalnya hanya putih kosong...kemudian saya buatkan ia border, background color dan solek solek sikit biar nampak menarik.

Contoh threaded comment box dari blog saya ini:

 

Ok, bagi sesiapa yang nak threaded commnets box macam saya punya, boleh copy paste aje kod berikut. Siap!

Dalam kod template korang, cari kod berikut, 

/* Comments */ , atau yang hampir serupa dengan kod tersebut. Padam/delete semua kod yang terletak di bawah /*Comments */ dan gantikan dengan kod berikut:

/*Comments */
#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 dashed #fd3b6f;background:#f3f4d6;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/AVvXsEjEo2thJkba_6Ks_BGfSe7TrD6FJN4HltFv1z_oTH27cAucy4qSa0hWyyPS8N6fDr4AjyrNuU-GfMwB7gx33GUOxp85lqiMN0kqkTa4xrlFKc5b3skM2eLsBpiTqGmsplKnnMWimlCMfyo/s320/author-pink.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%} 

Kemudian SAVE/simpan dan lihat hasilnya. Semoga berjaya. Jika korang nak ubahsuai background color, jenis border, boleh ubahsuai pada kod berikut:

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px dashed #fd3b6f;background:#f3f4d6;padding:10px} 

p/s:  Jangan pening2 ya, make sure korang backup template korang dulu sebelum mencuba masukkan kod yang baru. 

Read More ....