Memodifikasi Tampilan Komentar Blogger Menjadi lebih elegan

Hai Sobat Blogger ! Setelah sebelumnya memposting tentang cara membuat daftar isi dropdown menu dengan Jquery , kali ini rizaldi priantama akan memberika tutorial yang gak kalah bagus dan menarik nih, yaitu tutorial tentang cara memodifikasi tampilan komentar blogger menjadi lebih elegan. Untuk demonya sobat blogger bisa melihatnya di tampilan artikel yang sudah diberi komentar , hasilnya akan sama persis seperti gambar yang saya tampilkan diatas. Nah jika sobat tertarik dengan tampilan komentar yang satu ini, sobat bisa membaca dan membahas bersama tutorial ini disini, dijamin tidak membingungkan dan sangat mudah diikuti.
Okelah daripada bikin bingung, langsung aja kita simak dan bahas bersama tutorial kali ini ,

1.) Baca Basmallah
2.) Masuk ke akun Blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Backup dulu template sobat, dengan cara mengeklik Download template lengkap
5.) Lalu centang tanda Expand Template Widget
6.) Sebelumnya hapus dulu kode CSS komentar sobat, lalu cari kode ]]></b:skin>
7.) Setelah sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

#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;outline:1px solid #fff;border:1px solid #ddd;padding:3px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzCzXFHDSn8M5884V5YlX18gBP-VjSbg7JseeBDwkl_BAPJHQFAO_6ItkblLRKpopf8zV6gtWwWoTRR3jVlwI_fE75jRcF6KAakGozvAqJYytulgsGCgeBDj_TssKc9KNn7oGuRhyphenhyphenius/s1600/author_comment.jpg);background-position:center;background-repeat: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,#eee),color-stop(1,#ccc));;background:-moz-linear-gradient(center top,#eee 20%,#ccc 100%)}.cm_entry{padding:16px;background:#FCFCFC;outline:1px solid #fff;border:1px solid #ddd;overflow:hidden}.cm_entry_a{padding:16px;background:#FCFCFC;outline:1px solid #fff;border:1px solid #ddd;overflow:hidden}.cm_arrow{display:block;width:9px;height:18px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtoWAdA2dO-IdB3Bf9tq5eszH9A7SEP72J2dQ5P11mG-TL2ck-1LsSkMjVpBjCi5g6XbcHd7BSSBKE2ntmAOsdEhVD8V_XJsUIrCXlacQb_L15zu1hAOZMXzEwlyg0cBdmvInrWR7OFpY/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:13px;color:#666 !important;text-decoration:none;font-weight:bold;float:left}.cm_name_a{font-size:13px;color:#666 !important;text-decoration:none;font-weight:250;float:left}.cm_date{font-size:10px;color:#999;text-decoration:none;float:right}.cm_date_a{font-size:10px;color:#2D5E7B;text-decoration:none;float:right;padding-top:5px}.cm_entry p{padding:5px;line-height:1.4em;clear:both;border:thin solid #E6E6E6;background-color:#F4F4F4;font-size:13px;color:#333;word-wrap:break-word}.cm_entry_a p{padding:5px;clear:both;border:thin solid #E6E6E6;background-color:#dff0fa;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}.owner-Body p{height:100px;margin-bottom:5px;border:thin solid #E6E6E6;background:#EFF5FB;padding:5px}.pic.owner-body img {
margin-left:23px;

8.) Jika sudah, cari kembali kode </body>
9.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas </body>

Kode

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

10.) Jika sudah dengan langkah sebelumnya, cari kode <b:includable id=comments var=post> lalu scroll pelan-pelan ke bawah sampai ketemu kode </b:includable>
11.) Lalu ganti kode <b:includable id=comments var=post> hingga kode </b:includable> dengan kode dibawah ini

Kode

<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 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=90113338581622&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>
<b:if cond=data:comment.author == data:post.author>
<div class=owner-Body>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class=comment-body>
<b:if cond=data:comment.isDeleted>
<span class=deleted-comment><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>

</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>
</b:includable>

12.) Ganti kode 90113338581622 dengan ID blog sobat yang tertera di alamat browsermu, untuk cara mengetahui ID blog sobat, silahkan baca di sini
13.) Simpan Template dan lihat hasilnya

Publish By :http://rizaldipriantama.blogspot.com

visit link download

Software Help

Search This Blog

Memodifikasi Tampilan Komentar Blogger Menjadi lebih elegan

Memodifikasi Tampilan Komentar Blogger Menjadi lebih elegan