Tutorial Pasang Threaded Comment Warna Berbeza bagi Admin

Jan 3, 2012

Home » Hal-hal Blog , HTML Coding , Threaded Comment , Tutorial » Tutorial Pasang Threaded Comment Warna Berbeza bagi Admin

Tutorial Pasang Threaded Comment Warna Berbeza bagi Admin

Hari ni baru saya dapat tunaikan permintaan dari Sembang Cyber yang bertanyakan cemana nak buat Threaded Comment yang membezakan komen admin dengan komen pengunjung..

Macam biasa, pi kat Dashboard > Design > Edit Html... Sebagai langkah keselamatan, sila save dulu template uols sebagai backup.. Pehtu, tick kat Expand Widget Templates, then search ]]></b:skin>, copy code kat bawah ni dan paste sebelum ]]></b:skin>.

#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/AVvXsEi3wCJnkRhrJ6lr-uUZiulwveck75GllRIBwE7fGFLoLhmLxkFeB3dq_DBfBzCCCoiyZ7DNJEDgevUhQFhFraeLWJEImuQTDYoUR9RfYZRmeI8ez7Ub-aHdmTDkzfD9nLxye1J35tCHaoxT/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/AVvXsEjMJ8pfa7JCqDsjgZqcLC9f9ZyuPd4uoHTyWn0ajCmXSFj3zlqRlWMXx2l_cPgM0NgMslBDDu7FwoJaZ6Xv-RxD8ppRpPd7QekMKS87RxCDBCC37HOwzsxo_6TbMIsa-cmsOEO608tDVaU/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;
}

Then, cari pula kod </body> dan paste code kat bawah ni sebelum atau di atas kod </body>.

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>

(1) Lepas tu, copy code kat bawah ni kat notepad dan tukar yang berwarna merah kepada ID blog uols. Cemana nak dapat ID blog uols tu? Cuba uols klik new post ke, kat bahagian link tu nampak tak ada tulis blogID=1234.. Ha, yang tu la ID uols..

<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=0000000000000000&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>

Biarkan dulu code kat atas ni dalam notepad, dan dengan menggunakan CTRL F, cari kod <b:includable id='comments' var='post'> di template uols. Dah jumpa, delete semua coding yang ada diantara kod <b:includable id='comments' var='post'> dengan kod </b:includable>, means delete semua coding di bawah kod <b:includable id='comments' var='post'> sehinggalah berjumpa dengan kod </b:includable>..

Contoh : delete semua coding yang bewarna hitam, yang warna biru jangan delete yer..

<b:includable id='comments' var='post'>
<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>
       ------------ Sebahagian daripada kod yang perlu di delete -------------------

      <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>
</b:includable&gt;

Dah delete, barulah copy code (1) di antara kod <b:includable id='comments' var='post'> dengan kod </b:includable> . Untuk tukar warna admin, cari kod .cm_entry_admin dan tukar warna di bahagian background mengikut pilihan masing-masing.. Nak tukar warna komen pengunjung, tukar warna background di kod .cm_entry.

Klik preview, kalau takde error dan berpuas hati bolehla klik save dan voila, bahagian komen uols makin bertambah comey...hehehe..

credit : Maribinablog

Nak tahu rahsia awet muda, Klik SINI

Nak insentif tunai, Klik SINI

Nak cari trendy hijab, muslimah attire, babykids wear, Klik SINI

Nak cari handbag LV, Longchamp, souvenir? Klik SINI