Jan 3, 2012

Home » , , , » 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(http://3.bp.blogspot.com/-PmKxzY3m4xc/TrH6vjTcW7I/AAAAAAAABbU/bjyOcVut-AA/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(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/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

Sign up HB!Affiliate to enjoy free gift!

Kliklah sini dulu.. Thanks!!

Suka entri ini, meh picit button kat bawah ni:

22 Comments
Comments

22 comments

Jan 3, 2012, 11:33:00 AM

Selama sejam myra try buat yang lain semua ok, tp part nak delete & paste kod baru tu tak boleh, dia keluar arrow..huhuu

Jan 3, 2012, 11:50:00 AM

nak try buatla...aritu xjadi

Jan 3, 2012, 12:38:00 PM

tq :)

Jan 3, 2012, 4:12:00 PM

bagus has.. nanti leh buat rujukan.. ;)

Jan 3, 2012, 4:24:00 PM

kak, sy try buat tp still xjadila...puas doh..pening dh kepala...xtau kat mana silapnya

Jan 3, 2012, 9:06:00 PM

nanti dni nak cuba jugalah :)

Jan 3, 2012, 11:54:00 PM

tuto yg senang nk paham :) nway boleh jer pasal bloglist tadi :))

http://fiqracake.blogspot.com/

Jan 4, 2012, 7:46:00 AM

terima kasih atas tutorial itu ..tapi saya ni hati kecik, takut nak cuba, takut tak menjadi.

saya dah masukkan blog awak dalam bloglist saya.

Jan 4, 2012, 8:19:00 AM

nice tutor sis.. ehehe ^^v

Jan 6, 2012, 12:47:00 AM

@Myra Jay huhu..kuar arrow? me dah cek, mmg betul coding ni..

Jan 6, 2012, 12:47:00 AM

@Lin Azlina ha, try la..

Jan 6, 2012, 1:07:00 AM

@eB ezrin sama2..

Jan 6, 2012, 1:08:00 AM

@kakyong hihih..buat ni pon as rujukan sendiri gaks, kot2 nanti nak tukar template, senang..

Jan 6, 2012, 1:09:00 AM

@Lin Azlina alahai..keluar error ke cemana? pelik juga ni..

Jan 6, 2012, 1:30:00 AM

@Ardini Humaira try la dni, lawo..

Jan 6, 2012, 1:41:00 AM

@fiQ'Ra thanks..

Jan 6, 2012, 1:42:00 AM

@al-lavendari hihi,tak cuba tak tahu pakngah..thanks..

Jan 6, 2012, 1:42:00 AM

@nizarazu thanks dear..

Feb 6, 2012, 2:06:00 PM

Trimakasih tutorialnya...bermanfaat sekali....:)

Mar 9, 2012, 4:23:00 PM

ala, tolong buatkan boleh tak? pening la....hehe....

May 7, 2012, 4:36:00 PM

salam.. tumpang tanya, kalau dah sedia ada komen thread ni tapi cuma nak letak warna je boleh pakai tak kod ni? tq :)

May 20, 2012, 4:26:00 PM

@cikpuanhady wau!

Post a Comment

Related Posts Plugin for WordPress, Blogger...