Cara Membuat Comment Form Blogger Menjadi Seperti Wordpress Di Blog

BIT-XP.COM - Kali ini saya akan share sebuah tutorial blogger yang saya dapatkan diforum-forum luar negeri. Mungkin comment form blogger kurang profesional karena tidak dilengkapi yang namanya reply button, tetapi bisa saja membuat reply button tetapi terlihat masih kurang profesional. Pernahkah sobat melihat reply button wordpress?? pastinya pernah dong... diwordpress jika menggunakan reply button pasti pesan yang di reply/dibalas akan sedikit memaju untuk lebih jelasnya liat dibawah ini

Langsung saya yuk

1.Login Blogger » Edit HTML » Expand Widget Template

2.Cari Code ]]></b:skin> dan pastekan kode berikut diatas kode tadi

.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, #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://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;

}

3.kemudian cari kode </body> dan pastekan kode dibawah ini tepat diatas kode tadi

<script type="text/javascript"></script>

4.Setelah itu cari kode dibawah ini

<b:includable id='comments' var='post'>

Hapus kode yang berada diantara dua kode ini

</b:includable>

5.Ganti kode yang dihapus tadi dengan code dibawah ini

<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=154513103004606848&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>

6.Simpan dan silahkan dicoba apakah berhasil atau tidak itu belakanganan....
INFO : cari kode

<a expr:href='"https://www.blogger.com/comment.g?blogID=154513103004606848&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>

dan ganti kode yang bewarna merah dengan Blog ID kamu

Cara Membuat Comment Form Blogger Menjadi Seperti Wordpress Di Blog

0 Response to "Cara Membuat Comment Form Blogger Menjadi Seperti Wordpress Di Blog"

Post a Comment