Ingin buat kotak komentar blogspot kita seperti gambar di atas ini. Gampang kok mengaplikasikannya. Ok langsung aja ya untuk cara pembuatan kotak komentar seperti di atas.
Langkah-langkah
- Masuk Blogger dengan login anda. Pilih Rancangan -> Edit HTML -> Centang Expand Template Widgets.
- Silahkan cari kode di bawah ini dengan menggunakan Ctrl + F.
]]></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/AVvXsEhhc1SVW-NoV4rO9JogvQGv-ikTPrmTyoXsSyhbgEp3AXv_mDzcshtGNa1uZTWM_XmCJGd4woW-m0RO1OOJrVkKr6DFHSg2f13vwYJBwm8_ISR-sTOBfFljPQO8uffyaNTPG81uHW9vK_s/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 > 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='"https://www.blogger.com/comment.g?blogID=0000000&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'/>
<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 - 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'/>
.
Sekian postingan pada kesempatan kali ini tentang Pasang Comment Style WP Untuk Blogspot/Blogger, semoga dengan artikel dan panduan ini dapat bermanfaat bagi Anda yang telah membaca dan menemukan artikel ini.
Tidak ada komentar:
Posting Komentar