Setelah membaca beberapa komentar dari Anda pada Sesuaikan sistem komentar berulir dan periksa sendiri, ada kesalahan ketika menerapkan CSS di posting ini: tombol balasan dan tombol beban lebih banyak tidak bekerja.
Sekarang dalam posting ini, saya akan menunjukkan cara untuk menyesuaikan sistem komentar theaded seperti Template Simplex Bigblue.
Sistem komentar baru berulir menggunakan javascript lebih dari bentuk komentar lama. Ini artinya jika kita melihat ke dalam kode template, kita tidak bisa tahu apa HTML tag yang akan digunakan dalam bentuk komentar, sehingga sulit untuk menulis CSS.
Untuk mengetahui apa yang tag HTML yang telah dihasilkan oleh javascript, Anda dapat menunggu untuk halaman penuh, dan kemudian simpan halaman tersebut ke komputer Anda.
Periksa halaman download, kita dapat melihat tag HTML apa dalam komentar.
Semua tag HTML yang dihiasi oleh atribut CSS di default file CSS Blogger. Anda tidak dapat mendownload / mengedit / memodifikasi file CSS. Jadi solusinya di sini adalah untuk menulis CSS baru dalam file template untuk menimpa default.
Berikut adalah kode HTML dari komentar bergulir yang saya dibuang di blog saya:
<div class="comments-content">
<div id="comment-holder">
<div kind="x" id="xxx">
<div id="xxx">
<div u="x" t="x" kind="x" class="comment-thread" id="xxx">
<ol id="xxx">
<li kind="x" class="comment" id="xxx">
<div class="avatar-image-container">
<img src="avatar">
</div>
<div class="comment-block" id="xxx">
<div kind="x" class="comment-header" id="xxx">
<cite class="user"><a href="xxxx" rel="nofollow">Comment name</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time</a></span>
</div>
<p class="comment-content" id="xxx">comment body</p>
<span kind="x" class="comment-actions secondary-text" id="xxx">
<a o="r" target="_self" href="javascript:;" kind="i">Reply</a>
<span class="xxxxxx">
<a href="xxx" target="_self" o="x">Delete</a>
</span>
</span>
</div>
<div class="comment-replies" id="xxx">
<span kind="x" id="xxx">
<div u="x" t="x" kind="x" class="comment-thread inline-thread" id="xxx">
<span kind="x" class="thread-toggle thread-expanded" id="xxx">
<span class="thread-arrow" id="xxx"></span>
<span class="thread-count" id="xxx">
<span style="display: none;" id="xxx"></span>
<span style="display: none;" id="xxx"></span>
<a target="_self" href="javascript:;">Replies</a>
<div class="thread-dropContainer thread-expanded" id="xxx">
<span class="thread-drop"></span>
</div>
</span>
</span>
<ol class="thread-chrome thread-expanded" id="xxx">
<div>
<li kind="b" class="comment" id="xxx">
<div class="avatar-image-container">
<img src="avatar of people who reply comment above">
</div>
<div class="comment-block" id="xxx">
<div kind="m" class="comment-header" id="xxx">
<cite class="user blog-author"><a href="xxx" rel="nofollow">name of people who reply comment</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time reply comment</a></span>
</div>
<p class="comment-content" id="xxx">comment body</p>
<span kind="m" class="comment-actions secondary-text" id="xxx">
<span class="item-control blog-admin pid-868019743"><a href="xxx" target="_self" o="d">Delete</a></span>
</span>
</div>
<div class="comment-replies" id="xxx"></div>
<div class="comment-replybox-single" id="xxx"></div>
</li>
</div>
<div kind="ci" class="continue" id="xxx"><a target="_self" href="javascript:;">Reply</a></div>
</ol>
<div class="comment-replybox-thread" id="xxx"></div>
</div>
</span>
</div>
<div class="comment-replybox-single" id="xxx"></div>
</li>
</ol>
<div kind="ci" class="continue" id="xxx" style="display: none;">
<a target="_self" href="javascript:;">Add comment</a>
</div>
<div class="comment-replybox-thread" id="xxx">
xxxxxxxxx
</div>
<div kind="rb" class="loadmore loaded" id="xxx"><a target="_self" href="javascript:;">Load more...</a></div>
</div>
</div>
</div>
</div>
</div>
Silakan lihat di kode di atas. Saya disensor informasi yang tidak perlu dalam kode di atas. Apa yang perlu kita ketahui adalah tag HTML dan atribut kelas dari kelas tersebut.
Berdasarkan markup HTML di atas, kita dapat menulis kode CSS untuk menghias mereka seperti yang kita inginkan.
Berikut adalah kode yang saya diterapkan dalam template Simplex Bigblue. Anda dapat menganggapnya contoh.
.comment {
list-style-type: none;
width: 100%;
}
.comment .avatar-image-container img {
width: 35x;
height:35px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 0;
padding: 3px;
vertical-align: middle;
}
.comment .avatar-image-container {
float: left;
max-height: 36px;
overflow: visible;
width: 36px;
}
.comment .comment-block {
margin-left: 70px;
position: relative;
background: none repeat scroll 0 0 #F7F7F7;
border: 1px solid #E4E4E4;
border-radius: 4px 4px 4px 4px;
overflow: hidden;
padding: 15px 20px 5px;
}
.comment .comments-content .datetime {
font-size: 11px;
font-style: italic;
margin-left: 6px;
float:right;
}
.comment .comments-content .datetime a{
color:#999;
}
.comment .comments-content .user {
font-style: normal;
font-weight: bold;
}
.comment .comments-content .user a {
color:#333;
}
.comment .comment .comment-actions a {
background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
border-radius: 2px 2px 2px 2px;
border-right: 1px solid #C4C4C4;
border-style: solid;
border-width: 1px;
color: #424242 !important;
display: inline-block;
margin: 5px;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #FFFFFF;
font: 11px/18px sans-serif;
margin: 5px;
padding: 1px 6px;
}
.comment .continue a {
background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
border-radius: 2px 2px 2px 2px;
border-right: 1px solid #C4C4C4;
border-style: solid;
border-width: 1px;
color: #424242 !important;
display: inline-block;
margin: 5px;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #FFFFFF;
font: 11px/18px sans-serif;
margin: 5px;
padding: 1px 6px;
}
.comment .comments-content .loadmore.loaded {
background: none repeat scroll 0 0 #4488DD !important;
color: #FFFFFF;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 10px;
text-align: center;
}
Anda dapat menyalin kode CSS jika Anda ingin komentar bergulir atau menulis kode lebih CSS jika Anda ingin membuatnya seperti yang Anda inginkan.
Harap posting ini bermanfaat untuk Anda.
Tidak ada komentar:
Posting Komentar