Salam bahagia,
Tutorial asal sila rujuk di link ini
Cara pasang fungsi Threaded Comment di Blogspot
Dan ini adalah tambahan atau kod untuk membuat highlight pada kotak komen admin/author (tuan punya blog).
 |
| dalam bahasa mudahnya : membuat background kotak komen yang berbeza bagi pengomen dan balasan dari tuan blog |
Step-step ini anda harus refer kepada tutorial asal.
Ni css untuk step 4
#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px
0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float:
right;
width: 100%;
}
.cm_head {
margin: 0;
width:
70px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align:
middle;
border: 1px solid #DDD;
padding: 3px;
background-image: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12Wcc6X6C1DulafPK2zTxyJRnQmha5g_FPTz7Oi962HxRVhyJCFWsEoXTbDiAh7zJRYsYWG9iQdl4QVqKd7LMCpODvMkIIilHkpCgc1w448zPZfXdZuHMbCaYKBQv4lzxCgGPbbL0Pvk/s60/684c851af59965b680086b7b4896ff98.png);
background-position:center;
background-repeat:no-repeat;
width:
35px;
height: 35px;
}
.cm_reply {
padding-top:
5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding:
1px 6px;
border: 1px solid #C4C4C4;
border-top-color:
#E4E4E4;
border-left-color: #E4E4E4;
color: #424242
!important;
text-align: center;
text-shadow: 0 -1px 0
white;
text-decoration: none;
-webkit-border-radius:
2px;
-moz-border-radius: 2px;
border-radius: 2px;
background:
#EDEDED;
background: -webkit-gradient( linear, left top, left bottom,
color-stop(.2, white), color-stop(1, #E5E5E5) );
background:
-moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px
sans-serif;
}
.cm_reply a:hover {
text-decoration: none
!important;;
background: #ccc;;
background: -webkit-gradient(linear,left
top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background:
-moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry
{
padding: 16px;
background: #F7F7F7;
border: 1px solid
#E4E4E4;
overflow: hidden;
}
.cm_entry_admin {
padding:
16px;
background: #ccc;
border: 1px solid #E4E4E4;
overflow:
hidden;
}
.cm_arrow {
display: block;
width: 9px;
height:
18px;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSt-kkfDEceHCNjB3gjp_CaJo_-El5kbNgr2_X4n7V_RGzjaEgn69tPLin-2p_7bo782JDkwPVy8D-CSOAxmiTJy3lyQRBVL6VsZi11LKr1utMseU_hpqfy1wZmkmdoJwLFyOSZX9uBQ/s1600/comment-arrow.gif)
no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info
{
margin-bottom: 5px;
}
.cm_name {
font-weight: bold;
font-size:
12px;
float: left;
}
.cm_name_a {
font-weight: bold;
font-size:
12px;
float: left;
}
.cm_date {
font-size: 10px;
float:
right;
font-style: italic;
color: #CCC;
}
.cm_date_a {
font-size:
10px;
float: right;
font-style: italic;
color: #CCC;
}
.cm_entry
p {
margin: 0;
font-size: 13px;
color: #666;
}
.cm_pagenavi
{
font-size: 10px;
text-transform: uppercase;
color:
#666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi
a {
color: #666;
text-decoration:
none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration:
underline
}
.cm_pagenavi span {
color: #888;
background:
white;
padding: 4px;
border: 1px solid #E0E0E0;
}
untuk menukar warna background kotak komen, hanya ubah background di bahagian :
.cm_entry , dan
.cm_entry_admin
kalau nak tukor yang lelain tu, seperti warna text, saiz font.. sila lah trial n error..
ini kod html untuk step 7
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=00000000000000000000&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry_admin'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
sumber : FB
MariBinaBlog
saya simpan di sini untuk rujukan masa akan datang.
salam kasih sayang,
.
Anda tahu LMFAO tu apa?
Terima kasih sudi membaca entri ini. Alang-alang dah baca, komen lah yer.. nanti senang kakyong nak balas jejak. Jangan serik singgah sini lagi.
