Segudang akal dan cara seorang blogger ingin membuat blognya nyaman dikunjungi, enak dilihat pembaca, terutama karena tampilan dan desainnnya yang menarik dan apik. Salah satu hal yang ingin diperbaiki tampilannya ialah kotak komentarnya (comment box). Kotak komentar memudahkan pengunjung atau pembaca artikel untuk berkomentar, bercurhat, mengapresiasi, mengkritik, menyarankan penulis untuk memberbaiki artikel yang ia tulis atau hanya untuk berkirim salam bagi sesama blogger.
Setelah saya telusuri, banyak sekali varian kotak komentar yang tampilannya keren, bahkan di antaranya ada yang menggunakan Disqus agar terlihat rapih. Namun sayangnya setelah saya coba mengikuti langkah seperti blogger yang tadi saya sebutkan, skor Pagespeed blog saya langsung menurun drastis. Tentu ini sangat dilema, bagaimana tidak ? Tampilan komentarnya sudah keren namun sayang, skor Pagespeednya menurun bahkan mendapat kategori Low.
Nah, untuk itu pada artikel MyBlog19 kali ini, saya akan membagikan tutorial membuat kotak komentar (comment box) yang fast-load, keren dan tentunya ringan. Silahkan anda simak!
» Silahkan anda buka website resmi blogger (blogger.com) dan login ke akun anda
» Pilih menu 'Tema'
» Klik edit html, akan tampil kode html yang banyak dan membingungkan bagi pemula yang belum banyak menggeluti html.
Nah selanjutnya anda akan memerlukan sedikit copy paste dan ketelitian ekstra. Namun agar lebih mudah sebaiknya anda menggunakan jalan pintas, tekan Ctrl+F secara bersamaan atau tekan F3 dan isi kotak dengan yang kode atau tulisan yang anda cari.
» Langkah pertama, gantilah kode CSS Komentar anda. Copy dan Paste kode berikut dan letakan di bawah judul CSS_Comments.
#comments{background:#fff;border:1px solid #ccc;margin:20px 0 0;padding:20px}
#comments h5{font:normal normal 18px Oswald,sans-serif;padding:0;margin:5px;color:#333;padding : 0 1px 5px 5px;line-height:1.em;margin:2px;display:block;}
.comment_inner{margin:20px 0;padding:0;overflow:hidden}
.comment_header{float:left;width:67px}
.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}
.comment_avatar{margin:0;padding:5px 5px 0;}
.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}
.comment_avatar{margin:0;padding:5px 5px 0;}
.comment_avatar{margin:0;padding:5px 5px 0;}
.comment_avatar img{border-radius:100%;width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY-9va2Fz995XdEoqUR9OVN55F6MHiIpGvoMDzq9J1zza9kfU6PxCfgesljuIK7SQPmxuhuEDOwrd2Z2dmdK-Vewoy485531UEQFP0KyWyNQQm57blyTMKeklevCTXiJH5UvT68rS9w0N/s1600/anonymous.jpg) no-repeat}
div.comment_avatar img[src="http://img1.blogblog.com/img/openid16-rounded.gif"]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY-9va2Fz995XdEoqUR9OVN55F6MHiIpGvoMDzq9J1zza9kfU6PxCfgesljuIK7SQPmxuhuEDOwrd2Z2dmdK-Vewoy485531UEQFP0KyWyNQQm57blyTMKeklevCTXiJH5UvT68rS9w0N/s1600/anonymous.jpg)}
.comment_name,.comment_name a{font-family:Oswald, Calibri, Sans-Serif;padding:0;margin:0 0 5px 0;font-size:18px;color:#939090;}
.comment_service{margin-top:0}
.comment_date{margin:0;color:#d6d5d5;font-size:14px;text-transform:uppercase}
.respond{float: right;margin:0;padding:0}
.comment_date:hover{color:#bbb;text-decoration:underline}
.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}
.comment_body p{line-height:1.4;margin:15px 0 5px;color:#666;font-size:14px;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{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#aaa;}
.comment_reply:hover{text-decoration:none;background:#2980b9}
.comment_hapus{font-weight:700;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('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') 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:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;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}
.comment-form p{border:1px solid #ccc;color:#000;margin-bottom:20px;padding:20px}
» Setelah kode CSS, selanjutnya carilah kode berikut.
<b:include data='post' name='threaded_comments'/>
» Setelah ketemu, gantilah dengan kode berikut.
<b:include data='post' name='comments'/>
» Langkah selanjutnya adalah, cari dan gantilah kode html komentar anda. Biasanya bertuliskan :
<b:includable id='comments' var='post'>
--------kode-banyak-sekali-dan-tiap-template-beda-------
</b:includable>
» Lalu silahkan anda ganti menjadi :
<b:includable id='comments' var='post'>
<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 untuk "<data:blog.pageName/>"</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar untuk "<data:blog.pageName/>" </b:if> <b:if cond='data:post.numComments > 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar untuk "<data:blog.pageName/>" </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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<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='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
Hapus
</a>
</span>
<b:else/>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_header'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' itemprop='replyToUrl' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
</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'/>
</div>
<div class='comment_service'>
<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='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3OMHMhwd38XX2JHk3BSxG9GRRKeoD6_F95bfIjtV6u6fmqNIgffwJrMIsJugzd3uBumZ8gC8drz8v_5XLI-meUP0hr8n_VKxq1sibgzL2iKiiquJd5Iaw265rE2MgEkIv5BJaucYVGY/s1600/delete4.png' title='Hapus Komentar'/>
</a>
</div>
<p itemprop='commentText'><data:comment.body/></p>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<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'>
<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 = {
'
maxThreadDepth'
:'
0'
};
</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=' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';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>
» Setelah anda menjalankan semua yang saya sampaikan, tibalah pada langkah terakhir, Simpan template.
Perubahannya bisa anda lihat pada salah satu postingan anda yang telah mendapat komentar dari pengunjung blog anda.
Namun cara tersebut hanya digunakan jika dilakukan dengan Laptop atau PC yang support untuk menampilkan dan mengedit html, berbeda caranya jika anda hanya menggunakan Android saja. Jika anda menggunakan Android, silahkan ikuti cara yang sering saya gunakan, yaitu:
Sebelumnya, download aplikasi pengedit teks html, yaitu QuickEdit Apk. Lalu lanjutkan dengan
1. Buka dan login ke blogger.com dengan browser andalan anda.
2. Pilih 'submenu Tema'
3. Pilih Backup/Pulihkan, lalu pilih download tema.
Setelah selesai diunduh, buka template dengan QuickEdit. Lalu editlah kode dan css komentar berdasarkan cara yang telah saya tuliskan, lalu simpan dengan nama baru (agar lebih mudah diingat). Jika sudah, selanjutnya,
» Masuk ke Blogger.com (lagi)
» Pilih 'Tema'
» Pilih 'Backup/Pulihkan', upload tema/template yang telah anda edit.
Nah teman, itulah tutorial membuat comment box keren, ringan, fast-load dan tentunya responsive. Semoga anda berhasil dan puas terhadap perubahan tampilan kotak komentar barunya.
Bagikan jika bermanfaat !
Dan jika ada yang perlu ditanyakan, tanyakanlah.
6 Komentar untuk "Tutorial Membuat Kotak Komentar Blog yang Keren, Fast-Load, Ringan, dan Responsive"
contoh nya kaya gimana gan ?
Live demo
Kaya kotak komentar ini
Terimakasih atas info nya
Sama-sama :-)
coba
Peraturan berkomentar:
» Berkomentarlah dengan bijak
» Jangan meninggalkan spam, promosi dan link aktif. Jika memaksa, link tak boleh aktif (titik diganti dengan koma). Contoh masrenoblog,blogspot,com