Tutorial Cara Pasang Fungsi Threaded Comment di Blogspot

by - 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(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_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_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 May Also Like

14 comments