Tutorial Cara Pasang Fungsi Threaded (versi budak gemok)

Thursday 10 November 2011 [ 0 ]

Hari nie .sekali lagi ..aini nak buad tutorial tentang care care pasang comment fungsi threaded versi aini .nak tau tak Threaded tuh ape .kalau nak ..mehh tekan > sini < .tengok dekat bahagian comment okeyy ..atau korang leh tgk pic dekat bawah nie ..

Dah paham ? dah kan ..tapi .aini bukan nak buad sebentuk macam nie ..tapi hanye iras iras ..aini tukar ekot versi aini sendiri ..okeyy lahh ..lets start the tutorial <3 .

Dashboard > Setting > Comment .

Dekat Comment form placement tuh korang tick Embedded below post .macam dekat pic bawah nie.

Lepas tuh .bermulelah tutorial kite yang merumitkan <3 .

Dashboard > Design > Edit Html > Expand Widget Templates .

seriusly kan .korang kene download templates dulu .sebab takut ade yang tak jadi ..
Mule mule ..search code ]]></b:skin> .
lepas tuh .copy code yang aini bagi nie dan pastekan dulu dekat notepad sebab code nie korang ubah ekot kesesuaian blog .

#comments h4 {
font-size: 24px;
font-weight: normal;
font-family: HoneyBold;
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: 2px solid #73026e;
padding: 3px;
background: transparent;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 2px solid #73026e;
border-top-color: #73026e;
border-left-color: #73026e;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
color: #000000 !important;
text-align: center;
text-decoration: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
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 HoneyBold;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: transparent;;
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: 5px;
background: transparent;
border: 2px solid #73026e;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://i1103.photobucket.com/albums/g462/shayunxaienie/purple.png) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: normal;
font-size: 12px;
float: left;
font-family: HoneyBold;
}

.cm_date {
font-size: 10px;
float: right;
font-style: bold;
color: #73026e;
}

.cm_entry p {
margin: 0;
font-size: 11px;
color: #73026e;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #000000;
font-weight: bold;
}

.cm_pagenavi a {
color: #73026e;
text-decoration: none;
padding:5px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #73026e;
background: transparent;
padding: 2px;
border: 2px solid #73026e;
}

# Yang warna Merah tuh border keliling comment .
# Yang warna Hijau tuh warna tulisan .
# Yang warna Biru tuh font bagi comment .
# Yang warna Purple tuh arrow ..kalau nak gune yang lain .aini dah sediakan .#Freebies 2
# Kalau ekot aini punyer dan korang tak ubah apeape pon .nanti jadi macam gambar bawah nie .

Okeyy ..lepas jeh siap edit semue code tuh ..korang pastekan semue code nie Dekat Atas code ]]></b:skin> .

Selepas itu .korang cari code </body> .copy code dibawah dah pastekan keatas code </body> .

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

Selepas itu .sampai ke code yang paling rumit sekali .serius susah ==' .tapi hasil lumayan okeyy ..so ..jangan malas malas ..erk .meleweh ==' .okey lah .korang copy code dibawah nie .dan paste kat notepad sekali lagi .

<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>

<div class='cm_pagenavi' id='cm_page'></div>

<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=3119174247400080043&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>
<div class='cm_entry'>
<span class='cm_arrow'></span>
<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>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>

<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>

# Yang warna kuning tuh korang kene gantikan dengan blog id korang ..taktau id blog tuh ape ?cube korang tgk dekat website blog korang bila korang tgh buad tutorial nie .means dekat edit html blog korang lah .bukan blog aini .dekat url tuh ade numbe panjang kan .die tulis macam <http://www.blogger.com/html?blogID=3119174247400080043&tpl=true>
yang merah tuh lah blog id ..pahamkan ?

Lepas jeh korang tukar blog id tuh ..korang search code nie pulak <b:includable id='comments' var='post'> .
Lepas jumpe code <b:includable id='comments' var='post'> .korang delete anak anak code die dekat bawah sampailah code </b:includable> .
Maksudnya .code anda haruslah menjadi bergini :-
<b:includable id='comments' var='post'>
kosong
</b:includable>
# Yang kosong tuhkan .korang kene gantikan dengan code yang korang edit dekat notepad tadi ..ade paham tak ?bende nie memang rumit sikit ..tapi kalau korang paham ..insyaAllah jadi <3 .

seriusly panjang code yang kene delete tuh ..aini dah copykan untuk korang ..korang tgk lah ..

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<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>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>

Buang semue tau !! ciayokk !!!

Labels: tutorial