shareallinfoneh: Cara Membuat Fitur Reply Thread Comment Keren

Cara Membuat Fitur Reply Thread Comment Keren -Setelah kamu membaca postingan Kamu Klik sebelumnya, yakni Cara Mudah Mengaktifkan Fitur Thread Comments Blogspot semoga saja kamu sudah berhasil mengaktifkan fitur thread comment diblog kamu. Akan tetapi tampilannya masih sangat sederhana dan simple. Naah.. Untuk mempercantik atau memperindah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Agar hasilnya jadi seperti gambar dibawah ini:

Lalu bagaimana caranya biar tampilan Thread Comment'y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:

Pertama login ke blog kamu > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
Cari kode CSS Comment yang lama, kalau CSS punya Kamu Klik sih seperti dibawah ini.

#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
#blog-pager-newer-link {
float:left;
}

Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu
Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah diatas kode ]]> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.)

#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:white; 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,#eee),color-stop(1,#ccc)); ; background:-moz-linear-gradient(center top,#eee 20%,#ccc 100%); }
.cm_entry{padding:16px; background:#F7F7F7; border:1px solid #E4E4E4; overflow:hidden}
.cm_arrow{display:block; width:9px; height:18px; background:url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) 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}
Setelah itu kamu cari kode </body>, setelah itu pastekan kode dibawah diatas kode </body>
Kemudian kamu cari kode <b:includable id='comments' var='post'> , Hapus kode antara kode <b:includable id='comments' var='post'>sampai dengan </b:includable> (kode yang berwarna biruyang harus didelete)

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 > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
</span> comment<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments</b:if>
</b:if>
</h4>

------------ sebagian kode yang harus didelete -------------------

<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>
Lalu Paste kode berikut ini diantara kode  <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah.

<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=ID BLOG KAMU&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=450,height=450"); 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>

Sehingga hasilnya Jadi seperti ini :

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

            <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=ID BLOG KAMU&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=450,height=450"); 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>
    </b:includable>

Keterangan:
- Ganti Tulisan ID BLOG KAMU dengan ID blog kamu, misal: 3867899460670236687 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.

Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^

Hmm.. mungkin agak rumit yaa pemirsa.. tapi yaa itulah yang saya ketahui. Selamat mencoba dan semoga berhasil

shareallinfoneh

Senin, 27 Februari 2012

Cara Membuat Fitur Reply Thread Comment Keren

Tidak ada komentar:

Posting Komentar