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/AVvXsEg6gWcM_dty8nbVjhACh9fZ-K3yRMJ2RjQfqdDVZJVWEZTgonptPgJXJgaEjuqk_mo1zFlSqOoxUiktF6o2HYlAHJXE9tfyyiZaTV1zF4kDeGJjyhennTaLPAirWohJBpk1WKd_3wgQQaE/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
3 comments:
Bagus tutornya. lanjutkan.. :)
berkunjung, membaca banyak blog bagus dan cocok
makasih sob, nice sharing
Post a Comment