Sudah sekian lama saya dengan kertas kecil ini tak posting,,hhe. kali ini saya akan share tentang tutorial blog yaitu Custom Design Css Threaded Comments. Mungkin ada yang bertanya apa fungsi Custom Design Css Threaded Comments.. :) yak Custom Design Css Threaded Comments berfungsi untuk memperindah/mempercantik tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blogger terlebih dahulu. Tetapi sebelumnya harus mengaktifkan threaded comments dulu ya sobat, dan tutorialnya dapat didapat Cara Membuat Comment Reply di blogger ini.
Yak kalo tutorial Custom Design Css Threaded Comments ikutin di bawah ini ya sobat :
- Pertama login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
- Cari kode CSS Comment, kira kira semua kodenya seperti di bawah ini.
#comments {
color: black;
float: left;
margin: 10px;
padding-top: 10px;
overflow: hidden;
border: 2px solid #CCC;
width: 620px;
}
#comments h4 {
color: #0066CC;
font-family:arial, tahoma, Sans-Serif;
font-size: 14px;
font-weight: normal;
margin: 10px 20px 5px;
}
#comments-block {
width: 580px;
float: left;
margin: 20px;
}
#comments-block .comment-author {
font-weight: bold;
background:#EEE;
padding:3px;
padding-left:10px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}
#comments-block .comment-body {
margin-left: 20px;
padding-left: 10px;
font-size: 12px;
text-align: left;
border-left: 3px solid #CCC;
margin-top: 20px;
margin-bottom: 20px;
}
#comments-block .comment-footer {
margin: 1em;
font-size:10px;
border-bottom:1px solid #D8D8D8;
}
#comments-block .comment-body p {
}
#comments-block .avatar-image-container img {
border: 1px solid #CCC;
float: right;
width: 20px;
height: 20px;
}
.comment-form {
max-width: 425px;
clear: both;
margin-left:30px;
}
.owner-Body {margin-left: 20px;
border-left: 5px solid red;
padding-left: 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.deleted-comment {
font-style: italic;
color: gray;
}
#blog-pager-newer-link {
float:left;
line-height:1.8em;
font-weight:700;
margin-left:10px;
}
#blog-pager-older-link {
float:right;
line-height:1.8em;
font-weight:700;
margin-right:10px;
}
#blog-pager {
text-align:center;
background:transparent no-repeat left bottom;
line-height:1.8em;
font-weight:700;
color:#FFF;
}
.feed-links {
clear:both;
line-height:0;
display:none;
}
- ganti dengan kode seperti ini
.comments {
clear: both;
marfin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE; border: 1px dotted #DDD;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkxz9lH2q8rEGFnPnRP97JZahxSJmqIaGoJBSIUhgNYRnYGMb5Jj8d7zhP5VuR_RFAx4VnQ5QZ5YrKD9HKQC-HVHJai-PtXpj26xuQMGIu59iva59NeM94m081AsSU2v54_uR8XTl9v4T/h80/icon_clock.gif) no-repeat;
margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .commdnt-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
- Langkah terahir yaitu simpan template dan lihat hasilnya.
