Cara Membuat Style Threaded Comments Keren Di Blogger

Sebelumnya saya sudah memberikan artikel mengenai Cara Modifikasi Tampilan Desain Threaded Comment di Blogger, namun kali ini saya akan kembali memberikan artikel bagaimana cara membuat style threaded comments mantap di blog agar menjadi lebih menarik dan lebih indah di pandang.

Cara Membuat Style Threaded Comments Keren Di Blogger
Sebenarnya anda boleh saja tidak menerapkan cara ini, karena pada pertemuan kali hanya memberikan tips mempercantik tampilan komentar di blog. Desain tampilan komentar di postingan blog anda nantinya akan seperti pada berikut ini. 

Perhatikan gambar diatas, gambar tersebut merupakan contoh yang akan nantinya muncul pada komentar blog anda. Desain komentar bawaan blogger ini memang terlihat sederhana dan ringan namun akan tetapi menurut saya desainnya cukup menarik untuk dipandang. Lalu bagaimana cara memasang threaded comments dengan desain tampilan keren seperti gambar diatas, langsung saja simak langkah pemasangan dan memodifikasi tampilan komentar bawaan blogger di bawah ini

Cara Membuat Style Threaded Comments Keren Di Blogger

Tutorialnya hampir sama dengan memasang threaded comments yang sudah saya buat sebelumnya, silahkan masuk ke menu template > edit html.
Langkah pertama, silahkan tambahkan kode css di bawah ini tepat diatas kode ]]></b:skin> atau </style>.

/* Design Threaded Comments */
.comment_admin .comment_author_flag {display:inline;background:#fff;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}
#comments{font:13px Roboto;background:#fff;border:1px solid #ccc;margin:10px 15px 0px;width:100%;}
#comments h5 {font-size:145%;font-weight:normal;left:0;background:#f5f5f5;color:#262626;padding:28px 20px 28px 25px;margin-bottom:15px;margin-top:0px;}
.comment_inner{background:#fff;margin:5px 0;padding:5px;overflow:hidden;border-bottom:1px solid #ddd;}
div.comment_inner.comment_admin {background:#fff;}
.comment_header{float:left;width:67px}
.cm_head{position:relative;background:#fff;margin:-10px -10px 0;padding:5px 10px 0px;}
.comment_avatar{border-radius:100px;margin:0;padding:5px 5px 0;}
.comment_avatar img{border-radius:100px;width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(http://1.bp.blogspot.com/-G0zAVt0juzo/U2zUS3UWlWI/AAAAAAAAAdE/EeaudQNy4Is/s1600/anonymous.jpg) no-repeat}
div.comment_avatar img[src=&quot;http://img1.blogblog.com/img/openid16-rounded.gif&quot;]{content:url(http://1.bp.blogspot.com/-G0zAVt0juzo/U2zUS3UWlWI/AAAAAAAAAdE/EeaudQNy4Is/s1600/anonymous.jpg)}
.comment_name,.comment_name a{padding:0;margin:0 0 0px 0;font-weight:bold;color:#000;}
.comment_service{margin-top:0}
.comment_date{margin:0;color:#888;font-size:13px;}
.respond{float:right;margin:0;padding:0}
.comment_date:hover{color:#bbb;text-decoration:underline}
.comment_body{background:#fff;margin-left:72px;padding:10px;}
.comment_body p{line-height:1.4;margin:0px 0 5px;color:#000;word-wrap:break-word;padding:0;}
.comment_child .comment_wrap{padding-left:78px}
.comment-delete{position:absolute;float:right;top:10px;right:10px;margin:0;padding:0}
.infonm{float:left}
.comment_reply{width:50px;display:block;font-weight:300;margin:0px 0 0;padding:3px 0;color:#222!important;text-align:center;text-decoration:none!important;background:#fff;border:1px solid #ddd;}
.comment_reply:hover{text-decoration: underline;background:#fff}
.comment_hapus{font-weight:300;margin:0;padding:0;color:#fff!important;text-decoration:none;}
.comment_hapus:hover{text-decoration:none;color:#000!important}
.unneeded-paging-control{display:none}
.comment-form{max-width:100%!important}
#comment-editor{width:100%!important;background:#fff url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 40%;margin-bottom:0;margin-top:5px}
.comment_form a{text-decoration:none;font-weight:bold;font-size:14px}
.comment-form p{background:#F5F5F5 none repeat scroll 0% 0%;padding:10px;margin:0px 0 0px 0;color:#000;font-size:13px;border-top:1px solid #ddd;position:relative}
.comment_reply_form{padding:0 0 0 70px}
.comment_reply_form .comment-form{width:100%}
iframe{border:none;overflow:hidden}
.deleted-comment{background:#e74c3c;color:#fff;padding:20px;margin:5px 0;display:block}
iframe{border:none;overflow:hidden}

Langkah berikutnya, silahkan cari kode mirip seperti di bawah ini.

<b:include data='post' name='threaded_comments'/>

Ganti kode tersebut dengan kode di bawah ini.

<b:include data='post' name='comments'/>

Langkah selanjutnya, cari juga kode seperti di bawah ini.

<b:includable id='comments' var='post'>

Silahkan ciutkan kode diatas hingga seperti kode seperti di bawah ini.

<b:includable id='comments' var='post'>...</b:includable>

Ganti kode di atas dengan menggunakan kode di bawah ini.


<b:includable id='comments' var='post'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<div class='comments' id='comments' itemscope='itemscope' itemtype='http://schema.org/Comment'>
<meta expr:content='data:post.title' itemprop='about'/>
<meta expr:content='data:post.canonicalUrl' itemprop='discussionUrl'/>
<b:if cond='data:post.allowComments'>
<h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span> Komentar</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar</b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar </b:if> </h5>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>

&#160;

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

&#160;

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>



<div class='clear'/>

<div id='comment_block'>

<b:loop values='data:post.comments' var='comment'>

<div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'>

<data:comment.body/> - <a class='comment_hapus' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>

Hapus

</a>

</span>

<b:else/>

<b:if cond='data:post.adminClass == data:comment.adminClass'>

&lt;div class=&#39;comment_inner comment_admin&#39;&gt;

<b:else/>

&lt;div class=&#39;comment_inner&#39;&gt;

</b:if>

<div class='comment_header'>

<div class='comment_avatar'>

<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>

</div>



</div>

<div class='comment_body'>

<div class='cm_head'>

<div class='cm_infonm'>

<div class='comment_name'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>

<span itemprop='creator'><data:comment.author/></span>

</a>

<b:else/>

<span itemprop='creator'><data:comment.author/></span>

</b:if>

<b:if cond='data:comment.author == data:post.author'/>

<a expr:href='data:comment.url' rel='nofollow' title='Permalink'>

<span class='comment_date' itemprop='commentTime'>

<data:comment.timestamp/>


</span>

</a>

</div>

</div>

<a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>

<img alt='delete' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='Hapus Komentar'/>

</a>

</div>

<p itemprop='commentText'><data:comment.body/></p>

<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' itemprop='replyToUrl' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>

</div>

<div class='clear'/>

&lt;/div&gt;

<div class='clear'/>

<div class='comment_child'/>

<div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>

</b:if>

</div>

</b:loop>

</div>

<div class='clear'/>

<b:if cond='data:post.commentPagingRequired'>

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

&#160;

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>

&#160;

<data:post.commentRangeText/>

&#160;

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

&#160;

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

<div class='clear'/>

<div class='comment_form'>


<b:if cond='data:post.embedCommentForm'>

<b:if cond='data:post.allowNewComments'>

<div class='comment_emo_list'/>



<b:include data='post' name='threaded-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' expr:title='data:postCommentMsg' title='Comments'>

<data:postCommentMsg/>

</a>

</b:if>

</b:if>

</div>

</b:if>

</div>

<script type='text/javascript'>

//<![CDATA[

if (typeof(jQuery) == 'undefined') {

//output the script (load it from google api)

document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scr" + "ipt>");

}

//]]>

</script>

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>

<b:if cond='data:post.numComments != 0'>

var Items = <data:post.commentJso/>;

var Msgs = <data:post.commentMsgs/>;

var Config = <data:post.commentConfig/>;

<b:else/>

var Items = {

};

var Msgs = {

};

var Config = {

&#39;

maxThreadDepth&#39;

:&#39;

0&#39;

};

</b:if>

//<![CDATA[

Config.maxThreadDepth = 2;

var Cur_Cform_Hdr='.comment_form';var Cur_Cform_Url=$('#comment-editor').attr('src');function trim(a){var b=' nrtfx5bx5dx7cx7dx3cx3ex0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000';for(var i=0;i<a.length;i++){if(b.indexOf(a.charAt(i))!=-1){a=a.substring(0,i);break}}return a}$('.comment_wrap .comment_body p').html(function(i,h){temp=h.toLowerCase();index=temp.indexOf('@<a href="#c');if(index!=-1){index_tail=temp.indexOf('</a>',index);if(index_tail!=-1){h=h.substring(0,index)+h.substring(index_tail+4)}}return h});function Valid_Par_Id(a){r=a.indexOf('c');if(r!=-1)a=a.substring(r+1);return a}function Cform_Ins_ParID(a){a='&parentID='+a+'#%7B';n_cform_url=Cur_Cform_Url.replace(/#%7B/,a);return n_cform_url}function Reset_Comment_Form(){html=$(Cur_Cform_Hdr).html();$(Cur_Cform_Hdr).html('');Cur_Cform_Hdr='.comment_form';$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cur_Cform_Url)}function Display_Reply_Form(e){par_id=$(e).attr('id');par_id=Valid_Par_Id(par_id);html=$(Cur_Cform_Hdr).html();if(Cur_Cform_Hdr=='.comment_form'){reset_html='<a href="#origin_cform" onclick="Reset_Comment_Form()">'+Msgs.addComment+'</a><a name="origin_cform"/>';$(Cur_Cform_Hdr).html(reset_html)}else{$(Cur_Cform_Hdr).html('')}Cur_Cform_Hdr='#r_f_c'+par_id;$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cform_Ins_ParID(par_id))}cur_url=window.location.href;search_formid='#comment-form_';search_index=cur_url.indexOf(search_formid);if(search_index!=-1){ret_id=cur_url.substring(search_index+search_formid.length);Display_Reply_Form('#rc'+ret_id)}for(var i=0;i<Items.length;i++){if('parentId'in Items[i]){var par_id=Items[i].parentId;var par_level=parseInt($('#c'+par_id+':first').attr('data-level'));$('#c'+par_id+' .comment_child:first').html(function(a,b){var c=Items[i].id;if(par_level>=Config.maxThreadDepth){$('#c'+c+':first .comment_reply').remove()}var d=$('#c'+c+':first').html();d='<div class="comment_wrap" id="c'+c+'" data-level="'+(par_level+1)+'">'+d+'</div>';$('#c'+c).remove();return(b+d)})}}var avatar=$("#comments");avatar.find('.comment_avatar img').each(function(){var a=$(this).attr('src');$(this).show().attr('src',a.replace(//s[0-9]+(-c)?//,"/s45-c/"))});

//]]>

</script>

</b:includable>

Langkah akhir silahkan anda simpan template. Kemudian lihat hasilnya. Bagaimana bagus kan tampilan threaded comments pada blog anda? demikianlah bagaimana cara memodifikasi threaded comments agar lebih menarik untuk dipandang. Semoga bermanfaat.


Gambar Gravatar
"Seseorang Informan yang baru belajar"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *