Blog Geisha

Comment Style

Pasang Comment Style WP Untuk Blogspot/Blogger - Nah pada kesempatan kali ini saya akan berbagi panduan/tutorial tentang tampilan komentar. Tampilan komentar ini merupakan tampilan yang bisa disebut tampilan keren dan fantastis, karena Anda dapat menggunakan tampilan komentar ini pada blog Anda yang berbasis blogspot, meskipun tampilan komentar dengan fitur reply ini biasanya digunakan pada wordpress. Pada tampilan ini ditambahkan fitur reply atau balas komentar yang tampilannya sama seperti wordpress, Mengapa ? Karena jika anda melakukan reply atau balas komentar maka hasil reply tersebut akan menjorok kedalam. nah jika Anda merasa terpesona dengan tampilan komentar yang satu ini, silahkan simak panduannya di bawah ini, lalu jika sesuai silahkan ikuti panduan di bawah ini untuk dipraktekan kedalam blog Anda.

• Untuk demonya silahkan lihat foto di bawah ini,

Gambar 1.1

Langkah-langkahnya !

• Sebelumnya kalian login dengan email dan password Anda ke blogger,

Gambar 1.2

• Pada dasboard blog Anda silahkan pilih Template,

Gambar 1.3

• Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
• Silahkan gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Selanjutnya, letakan kode Css di bawah ini sebelum kode di atas atau kode yang sudah Anda temukan, 

/* -- Comment -- */
#comments h4 {font-size: 18px; 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;background-image: url(http://loker.nazuka.net/wp-content/uploads/2011/11/default_avatar.jpg);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;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/AVvXsEjL0B36r206oY-41t5LQmtQ1aOVn0LYMveLj7Da3JcUQOEZNjppjvma6zxiEpHSX7sNjZJzlnWqs723xwOza6JQxH7xX9FHUZRVm7hkin-dI2tEISc4QlqzaLZ8mj9vxuTSpi0suZYIsfA/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;}
.comment-body {padding: 0px;margin: 0px;}
.deleted-comment {font-style:italic;color:gray;} 

• Selanjutnya, kalian cari kode html di bawah ini,

<b:includable id='comments' var='post'> (kode ini jangan dihapus)

Isi Kode Html Lama (hapus kode diantara kode diatas dan dibawah)

</b:includable> (kode ini jangan dihapus)

• Silahkan kalian ganti kode html lama pada template blog Anda yang berada di antara kode tersebut dan masukan kode html yang baru di bawah ini antara kode tersebut,

<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=8741925147383566920&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='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'/>
        <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>

Keterangan,
Silahkan Anda meletakan kode di atas antara kode <b:includable id='comments' var='post'> dan kode </b:includable> atau meletakan kode diatas ditengan kode tersebut.

• Silahkan Anda ganti tulisan yang berwarna merah dengan blogid Anda.
• Selanjutnya, silahkan Anda cari kode di bawah ini,

</body>

• Silahkan Anda letakan script di bawah ini di atas atau sebelum kode yang sudah anda temukan,

<script src='http://koisine-blogspot.googlecode.com/files/comments.js' type='text/javascript'/>