Evo Magz v4.7

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/AVvXsEjS43cuk3KOEFBqBCmwzep4WSYUJVUf75I4y5ZAIVs4rvsSDapJOkGd82fpsFiRRow-KamSIgBM96MJn8Na7MD69nBf1-aDJJyKIuznalvIs92G17PJAnAdM90LFm4F_Q_30dkGQ_WFSVQ/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/AVvXsEiAVHQzkKX_YTX_Mu_Hym4UaB2AY9Jg-ec4_gamTPvI30csVuKc-HFEmAaoaIs0tFKSPu-CYLOEfOrmmVQq2bPrAXskz03uE4SLDrH79N4aWGnBSa9e0F4CUz0dhFO0a64PK9vXgbjjjnw/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

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Memodifikasi Tampilan Komentar Blogger Menjadi lebih elegan