Membuat Threaded Comment Style Blogger

Assalamualaikum Wr. Wb.

Hai Sobat BMCyber, malam-malam gini udah sendiri, belum punya pacar lagi, dari pada bengong mending ngeshare aja dah. Malam ini saya akan memberi ilmu yah walau gak bagus tapi lumayan lah tentang Membuat Threaded Comment Style Blogger ilmu ini dapet dari bang Deejyan.

Langsung aja deh,


DEMO

Update: Blogger telah menambahkan beberapa kode dari belakang dan karena itu semua avatar komentar dengan gambar melingkar memiliki sedikit masalah. Untuk mengatasinya cukup tambahkan CSS berikut:

komentar avatar-gambar-wadah img {max-width: 40px penting;}..
Langkah-Langkah Memasang Threaded Comment Style :

Salin Code Dibawah ini di atas code ]]></b:skin>

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:10px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzXn46mkC6Wt4IYqX-B02fDI0Wfv3_Onv3rokoLGy0hpGnAtrWMNSacJQRG3SJ8MvfcpXMYff4lMSWWOpAmtRhDflZlCAPCcnBrUufWXq4kkJo0UCRttrct8YvPBENJHbeuTvZo74tuc/s1600/dashed-single.png) no-repeat 4.3em center;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comment-actions:before {content:"\21AA";}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: white;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .comment-block {padding: 11px !important;}
.comment-thread ol div.continue {display:none !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: silver;padding: 2px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:43px !important;width:42px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .datetime {position: relative;right: 5px;top: 5px;font-family: arial;font-size: 15px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comment-actions.secondary-text {width:400px !important;}

Lalu Save
Moga bermanfaat yah kawan

Related Post