Mempercantik Kotak Komentar Blogspot Ala Wordpress
Mempercantik Kotak Komentar Blogspot Ala Wordpress - Nah pada kesempatan kali ini saya akan membahas mengenai merubah tampilan komentar blogspot yang sama seperti wordpress, yaitu fitur reply/menjawab yang menjorok kedalam. Sebelumnya juga saya pernah membahas mengenai trik yang satu ini, tetapi tampilan/style dari kotak komentar berbeda dan ada sedikit fitur baru, silahkan lihat artikel sebelumnya dengan tampilan kotak komentar yang berbeda disini. Sebelumnya musim ini blogspot telah merubah tampilan komentar default blogspot dengan fitur reply yang sama seperti wordpress, yaitu menjorok kedalam, tetapi saya akan memberikan script dengan fitur tersebut dengan tampilan yang menarik dan unik. Nah jika Anda ingin mengganti kotak komentar Anda menjadi lebih baik agar kotak komentar pada blog Anda terlihat seperti wordpress, mari simak panduannya di bawah ini.Tampilan dari kotak komentar blogspot ala wordpress
Perhatian : Nah dibutuhkan konsentrasi yang baik saat Anda akan mengganti dan menambah script baru, karena sangat sulit jika Anda blogger pemula dalam melakukan trik ini, tetapi syukur jika Anda berhasil melakukan trik yang satu ini.
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 css di bawah ini sebelum kode tersebut,
/* Comments
----------------------------------------------- */
#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:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN5WKP95js99-UvtrKcIfq65piQl74P4yqWF4SVtuSN_f7CGzMZHvGScMaZ85lex6qSGF6NSITdlfDmX287DD_Iyb1ElHxXYaFTImtoksUORdENG8VnOckFORLWF13gqsFJy_yOa6orv8/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
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: #fcfcfc;
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;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.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 Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}
- Selanjutnya, silahkan cari kode di bawah ini,
</body>
- Lalu letakan script kode di bawah ini sebelum kode tersebut,
<b:if cond='data:blog.pageType == "item"'>
<script src='http://koisine-blogspot.googlecode.com/files/comments.js' type='text/javascript'/>
</b:if>
Nah, berikut ini langkah yang lumayan rumit, karena dibutuhkan konsentrasi yang maksimal agar dapat mengikutinya dengan baik, kode berikut berpengaruh besar pada komentar pada blog Anda, karena dengan kode di di bawah ini akan merubah keseluruhan tampilan komentar pada blog Anda agar sama seperti wordpress.
- Selanjutnya, silahkan cari kode pembuka <b:includable id='comments' var='post'> dan ditutupi dengan kode </b:includable>
Diantara kode tersebut didalamnya terdapat kode yang harus Anda ganti dengan kode baru, dan Anda harus meletakan kode baru di bawah ini di antara kode yang sudah ditentuakn, perhatikan langkah-langkah di bawah ini.
<b:includable id='comments' var='post'>
Kode lama Anda yang harus diganti dengan kode baru.
</b:includable>
- Selanjutnya, letakan kode baru di bawah ini diantara kode <b:includable id='comments' var='post'> dan </b:includable>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</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=0000000000000000000&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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6W3UwSFdr2merPO_-Q1LsyqDxG4HOWcO6WrEFM3G3OreUiV8y69XCA6YJGqvmOLtA74TTuhJZ7Emh3MdS9MHMR58hgP5P50XC_j3tVitUq6GDVud4nbudhr0NoxFbvodq2AwK_UqKyUo/s1600/adminstar.png' title='Admin' width='20px'/>
<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_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd 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>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</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>
- Untuk blogID=0000000000000000000, silahkan Anda ganti dengan blogID pada blog Anda.
- Simpan Template.
Sekian tutorial pada kesempatan kali ini mengenai "Mempercantik Kotak Komentar Blogspot Ala Wordpress" ini. Semoga artikel ini bermanfaat, mudah dipahami.
Update : Kode sudah diperbaiki, karena banyak yang tidak bekerja.
Terima kasih.
