Tutorial Cara Pasang Fungsi Threaded Comment di Blogspot

June 25, 2012








Assalamualaikum w.b.t

Aku ada tengok segelintir blog yang entrinya boleh reply komen. Ya dulu memang aku ada buat. Tapi bila reply komen, komen tu tak berada di bawah komen yang direply tu. Tetapi setiap komen yang direply untuk komen akan berada di bawah sekali di antara komen-komen yang ada. Entah-entah korang faham ke tak la apa yang aku cakap ni.

Nak lagi mudah faham, apa kata klik di entri ni: LINK

Tengok ruangan komen tu. Kita reply komen orang, akan ada di bawah komen yang direply tu. Kebanyakan blogspot tak ada keistimewaan ni. So aku pun cuba dan terus mencuba la cari tutorial ni. Dah akhirnya berjaya. Sekalung tahniah untuk aku. Hahaha!

Jadi untuk sesiapa yang teringin jugak nak buat, kat bawah ni la stepnya. Tapi agak panjang. Jadi kena ikut step betul-betul supaya tak tersalah langkah.



STEP 1
Log in dashboard--> Template --> Edit HTML --> Proceed.


STEP 2
Seterusnya tick "Expand Widget Templates"


STEP 3
Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>


STEP 4
Copy dan paste kod css ini, di atas atau sebelum kod ]]></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/AVvXsEiANA8z3uW3mPPz4RCwp7UJnvHGpxhFmimPcrHz5nZUOPBCv9iOdL4_nGeR_xRnsrdSU-kJOW04yrfonqzMmt87kZWj9s-_lvUDI2koJQ6z2x4Yc9EHzryCd99J6Qq7tJmlELk3EZpK4byd/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_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZFkGPqevZl03xrRei4T1mvaRqv8G321VNyNFQUYrv_ZvlK5k1-KEpmUoQg-4e5DB6yMR5jZXPFcyl7goQgeQob0gVf4OEaL3ZYcXEtFz4GMadWkY2Q6VpiQZJd7BVtUevqFfxdSRHfH8/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_date {
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;
}



STEP 5
Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </body>



STEP 6
Copy dan paste kod ini, di atas atau sebelum kod </body> 




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




STEP 7
Seterusnya, copy dan paste kod ini pada notepad dan edit pada kod yang di bold merah dengan menggantikannya dengan ID Blog anda.


Contoh ID blog saya : http://www.blogger.com/rsd.g?blogID=4306708368407091301


<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 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='&quot;https://www.blogger.com/comment.g?blogID= 4306708368407091301&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); 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>


STEP 8
Seterusnya adalah langkah akhir yang merumitkan sedikit. Kembali kepada script template anda. Dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <b:includable id='comments' var='post'>


Selepas menjumpai kod tersebut, delete kod-kod yang bermula selepas kod <b:includable id='comments' var='post'> hingga sebelum kod </b:includable>


Contoh:

<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 &gt; 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>



STEP 9
Kemudian, copy kod yang telah siap di edit pada notepad ( rujuk langkah ke 7) dan paste pada kod yang telah anda delete pada langkah ke 8 di atas.


<b:includable id='comments' var='post'>
Paste kod yang siap di edit pada notepad di bahagian ini
</b:includable>




STEP 10
Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.




p/s:
1. Sila pastikan anda membuat backup pada script template sebelum membuat tutorial ini.
2. Pastikan setting Comment Location anda adalah Embedded  (Lokasi Ulasan = Terbenam).
3. Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, sila cari kod css yang seperti ini dan delete.



.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}



Fuh! Panjang berjela tak? First time aku buat entri tutorial ni. Buat ni memerlukan kesabaran yang tinggi. Sebenarnya kalau ikut step dia senang je. Baidewei, terima kasih kepada maribinablog.blogspot.com atas entrinya yang berguna ini.

Selamat mencuba!




Hami Asraff:


"Buat banyak kali, praktis, praktis, dan praktis. Lama-lama mesti terer!"





You Might Also Like

14 Comments

  1. Salam..abg,,nak tanye..tau x kalau nak tukar dari wordpress ke blogspot dan pindahkan semua data dari wordpress tu?

    Sori lari tajuk.Saja nk tanya kalau abg tau:)

    ReplyDelete
  2. x fhm step tujuh?notepad kat mana?

    ReplyDelete
  3. ya allah.. panjang sungguh tutorialnya pun.. haha thanks.. tetap akan dicuba =p

    ReplyDelete
  4. @Anonymous Waalaikumussalam. Minta maaf, tak tau la :)

    ReplyDelete
  5. @Anonymous Maksud notepad tu, copy code tu ke tempat lain dulu dan paste. Tak semestinya notepad. Word pun boleh. Supaya senang nak edit. Hmmm, faham tak ni?

    ReplyDelete
  6. @Hikaru Yui Tu la. Takpa, cuba slow-slow. Musti berjaya :)

    ReplyDelete
  7. alhamdulillah...saya dah lakukan yang seperti itu dan sukses, hasilnya bisa dilihat di blog saya

    ReplyDelete
  8. @Hami Asraff dah jadi.. haha thanks sbb share.. silalah jenguk

    http://sesedaporen.blogspot.com/

    =p=p=p

    ReplyDelete
  9. @Hami Asraff salam... actually xjadi... display dia mmg dah bertukar tp nak post new comments bila tekan reply tu dia keluar "sorry for the inconvenience blablabla"

    camna ea?

    ReplyDelete
  10. alhamdulillah. Lama cari mcm mna nak buat ni. Terima kasih. Tapi, nak tanya mcm mana nak decorate sikit comment-2 box tu mcm hami?

    ReplyDelete
  11. @Hikaru Yui Saya sendiri pun susah nak jawab. Sebab saya ikut sebijik je step tu dan jadi.

    ReplyDelete
  12. @Shazwina Nak decorate macam mana ya? Kurang faham. Sebab saya tak decorate apa-apa pun.

    ReplyDelete

Setiap komen anda akan diapprove dengan senyuman :)

Subscribe