21 Feb 2012

Pasang Threaded Comment Pada Blogspot

Threaded Commnet
Assalamu 'alikum
Muro'i El-Barezy pernah ditanya oleh sobat Muhammad Hidayat tentang membuat komentar yang ane pake pada blog ini. Walaupun ane sangat kurang bisa dalam edit mengedit, tapi demi berbagi ilmu, ane coba untuk share.Entah dapet dari mana ilmu ini sampe lupa karena udah lama. Bagi para master lewat aja yah hehe... 
Komentar ini dinamakan "Threaded Comment". Dan sobat yang pake template bawaan blogger biasanya sudah tersedia layanan ini, tinggal diaktifkan saja. Tapi bagi yang pake template lain memang harus edit edit lagi.Langsung saja deh silakan ikuti langkah-langkah di bawah ini :
  1. Log in dashboard--> Template --> Edit HTML --> Proceed.
  2. Kemudian klik "Expand Widget Templates"
  3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kode ]]></b:skin>
  4. Copy dan paste kode css ini, di atas atau sebelum kode  ]]></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;
}
5. Kemudian, dengan menggunakan keyboard, tekan "Ctrl+F" cari kode  </body>

6. Copy dan paste kode ini, di atas atau sebelum kode </body>

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>
7. Kemudian, copy dan paste kode ini pada notepad dan edit pada kode yang di bold merah dengan menggantikannya dengan ID Blog sobat.

<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 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='&quot;https://www.blogger.com/comment.g?blogID=7767855516934954389&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'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='dofollow' 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'/>
     
    <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>
 
8. Terakhir, kembali kepada script template sobat. Dengan menggunakan keyboard, tekan "Ctrl+F" carilah kode  <b:includable id='comments' var='post'>

Setelah menemukan kode tersebut, gantilah kode setelah <b:includable id='comments' var='post'> hingga sebelum kode </b:includable> dengan script yang telah di edit ID blognya, seperti ini :

<b:includable id='comments' var='post'>
Paste kode yang sudah di edit pada notepad di bagian ini
</b:includable>


9. Terakhir, klik PREVIEW. Jika tidak terjadi kesalahan, klik Save.
Catatan :
  1. Silakan  pastikan sobat membuat backup pada script template sebelum membuat perubahanl ini.
  2. Pastikan setting Comment Location anda adalah Embedded
  3. Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, silakan cari kode css yang seperti ini dan delete.
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}
Semoga bermanfaat……