Modifikasi Komentar Kompi Males Tanpa Avatar

Setelah kurang lebih 1 pekan kemarin saya tidak bisa melakukan kegiatan blogging seperti biasanya karena ada sesuatu hal yang tidak bisa ditinggalkan, akhirnya pada hari ini saya bisa menyempatkan membuat postingan untuk menjawab beberapa pertanyaan sahabat-sahabat KA.

Kali ini saya akan menjawab pertanyaan mas +Reo Adam  mengenai cara memodifikasi komentar template Kompi Males menjadi seperti komentar Kompi Ajaib yang sedang digunakan saat ini.

Pada modifikasi ini saya menghilangkan photo avatar komentator dengan tujuan untuk lebih meringankan beban blog ketika me-loading halaman. Penampakannya seperti pada gambar di bawah ini.

Komentar Kompi Males Tanpa Avatar


Bagi yang tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama
Silahkan cari kode seperti di bawah ini kemudian hapus kode tersebut.


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

Langkah Kedua
Silahkan cari kode CSS comment-nya seperti di bawah ini.


#comments{margin:70px auto 0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd}
#comments h3 {margin-bottom:25px;font:24px Oswald;text-transform:uppercase}
.comment_avatar { height: 48px; width: 48px; background: #fff url(http://2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/s48/anon48.gif) no-repeat center center; float: left; margin-top: 5px; margin-right: 10px; margin-left:-30px;padding:4px;border:1px solid #ddd; overflow: hidden;transition:all 400ms ease-in-out }
.comment_name { color: #444;font-size: 18px; font-weight: normal; line-height: 19.5px; max-width: 100%; text-decoration: none; margin-top: 8px;text-transform:uppercase }
.comment_name a { text-transform: uppercase; font: 20px Oswald; color:#444;text-decoration:none; transition:all 400ms ease-in-out}
.comment_name a:hover { color: red;text-decoration:none; }
.comment_service{float:right;margin-right:0;margin-top:-35px;position:relative}
.comment_service a{display:inline-block}
.comment_body p {font:16px &#39;PT Sans Narrow&#39;; line-height: 1.3em;color: #666}
.comment_body {margin:5px 0 10px;padding:0 60px 0 38px;position:relative}
.comment_date { color: #999; font-style: italic; font-size: 11px; line-height: 25px; cursor: pointer; font-weight: normal;margin-right:20px }
.comment_area {border:1px solid #ddd;margin-bottom:10px; margin-left:30px; padding-right:10px; transition:all 400ms ease-in-out}
.comment_area:hover {border:1px solid #666;}
.comment_area:hover .comment_avatar{border:1px solid #666;}
.comment_area:hover .comment_reply{opacity:1; top:8px}
.comment_child .comment_body { margin-top: 5px; margin-bottom: 10px;padding-left: 30px}
.comment_child .comment_wrap {padding-left: 40px}
.comment_reply {display:inline-block;cursor:pointer;color:#ffffff;font-family:arial;font-size:11px;font-weight:bold;padding:4px 16px;text-decoration:none;float:right; position:absolute; right:0; top:-20px;opacity:0; transition:all 400ms ease-in-out;background-color: #666}
.comment_reply:hover { text-decoration: none;background-color:#333}
.comment_reply:active {margin-top: 1px}
a.comment_reply {color:#fff}
.comment_admin .avatar-image-container {}
.unneeded-paging-control {display: none;}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form {width: 100%}
.comment_avatar * { max-width: 1000%!important; display: block; max-height: 1000%!important; width: 48px!important; height: 48px!important;margin-right: 10px; background: #fff  }
.comment_child .comment_avatar, .comment_child .comment_avatar * { width: 40px!important; height: 40px!important; float: left; margin-right: 10px; background: #fff }
.comment_form a { color: #2f6986; text-decoration: none; }
.comment_form a:hover {color: #2f6986; text-decoration: underline;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline-block;color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;padding:1px 8px;text-decoration:none;text-shadow:0px 1px 0px #810e05;position:absolute;margin:3px 0 0 10px;background-color: #666}
a.comment-delete{float:right;position:absolute;top:4px;right:0; font-size: 16px;color: #999}
a.comment-delete:hover{color: red}
#comment-editor {width:103% !important;background:transparent url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 30%;margin-left:-8px}
.comment-form {max-width: 100%!important;margin-top:25px!important}
.comment_emo_list .item {float: left;width: 40px;text-align: center;height: 40px;margin: 10px 10px 0 0;}
.comment_emo_list span {display: block;font-weight: bold;font-size: 11px;letter-spacing: 1px;}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important}
.comment-form p {background: #666;padding: 10px;margin: 5px 0 5px 0;color: #eee;font:14px &quot;Open Sans&quot;,&quot;Trebuchet MS&quot;,Helvetica,sans-serif;line-height: 20px;width:97%;border-radius:3px;position:relative;}
.comment_child .comment-form p {width:95.5%;}
.comment-form p:after{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent;}
iframe{border:none;overflow:hidden}
.deleted-comment{display:block;color:#333;font:italic 13px Arial;word-wrap:break-word;margin-top:10px;}

Kemudian silahkan ganti kode CSS di atas dengan kode CSS comment di bawah ini.


#comments{margin:70px auto 0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd}
#comments h3 {margin-bottom:25px;font:24px Oswald;text-transform:uppercase}
.comment_name { color: #444;font-size: 20px; font-weight: normal; line-height: 20px; max-width: 100%; text-decoration: none; margin-left: 10px;margin-top: 5px;text-transform:uppercase }
.comment_name a { text-transform: uppercase; font: 20px Oswald; color:#444;text-decoration:none; transition:all 400ms ease-in-out}
.comment_name a:hover { color: red;text-decoration:none; }
.comment_body p {font:16px &#39;PT Sans Narrow&#39;; line-height: 1.3em;color: #666;background-color:#fff;border:1px solid #ccc;padding:10px;}
.comment_body{margin-top:5px;margin-bottom:10px;padding:5px 0 15px 10px}
.comment_date { color: #999; font-style: italic; font-size: 11px; line-height: 11px; cursor: pointer; font-weight: normal;float:left;margin-left:10px;margin-top:5px}
.comment_area {border:1px solid #ccc;margin-bottom:25px; padding-right:10px; transition:all 400ms ease-in-out;background:#ddd;position:relative}
.comment_child .comment_area { margin-top:-20px;background:#edebeb}
.comment_child .comment_wrap {padding-left: 40px}
.comment_reply {display:inline-block;cursor:pointer;color:#ffffff;font-family:arial;font-size:11px;font-weight:bold;padding:4px 10px;text-decoration:none;float:right; position:absolute; right:10px; bottom:10px; transition:all 400ms ease-in-out;background-color: #666}
.comment_reply:hover { text-decoration: none;background-color:#333}
.comment_reply:active {margin-top: 1px}
a.comment_reply {color:#fff}
.unneeded-paging-control {display: none;}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form {width: 100%}
.comment_form a { color: #2f6986; text-decoration: none; }
.comment_form a:hover {color: #2f6986; text-decoration: underline;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline-block;color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;padding:1px 8px;text-decoration:none;text-shadow:0px 1px 0px #810e05;position:absolute;margin:3px 0 0 10px;background-color: #666}
a.comment-delete{position:absolute;top:5px;right:5px; font-size: 16px;color: #999}
a.comment-delete:hover{color: red}
#comment-editor {width:103% !important;background:transparent url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 30%;margin-left:-8px}
.comment-form {max-width: 100%!important;margin-top:25px!important}
.comment_emo_list .item {float: left;width: 40px;text-align: center;height: 40px;margin: 10px 10px 0 0;}
.comment_emo_list span {display: block;font-weight: bold;font-size: 11px;letter-spacing: 1px;}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important}
.comment-form p {background: #666;padding: 10px;margin: 5px 0 5px 0;color: #eee;font:14px &quot;Open Sans&quot;,&quot;Trebuchet MS&quot;,Helvetica,sans-serif;line-height: 20px;width:97%;border-radius:3px;position:relative;}
.comment_child .comment-form p {width:95.5%;}
.comment-form p:after{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent;}
iframe{border:none;overflow:hidden}
.deleted-comment{display:block;color:#333;font:italic 13px Arial;word-wrap:break-word;margin-top:10px;}

Kemudian cari kode di bawah ini dan hapus kode ,.comment_date


@media screen and (max-width: 480px){
#title img,.post img{max-width:100%; height: auto; width: auto}
.content-wrapper{width:100%}
#header2,#header2 img,#ads1-wrapper img,#ads2-wrapper img{text-align:center;max-width:100%; height: auto; width: auto}
.title-share,.comment_date,.comment_admin .comment_author_flag{display:none}
.related-post-style-3 .related-post-item {width:80px;margin-right:10px}
}

Kemudian tambahkan kode .comment_name a {font: 18px Oswald} pada kode di bawah ini


@media screen and (max-width: 320px){
.share-box,.printfriendly,#header2,#ads1-wrapper,#ads2-wrapper{display:none}
.related-post-style-3 .related-post-item {width:105px;margin-right:10px}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font:11px Oswald}
#sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;}
#sidebar-wrapper img{max-width:100%; height: auto; width: auto}
.breadcrumbs{height:auto;line-height:30px}
.breadcrumbs a{display:inline-block;background-image:none;}
}

Sehingga menjadi seperti di bawah ini.


@media screen and (max-width: 320px){
.share-box,.printfriendly,#header2,#ads1-wrapper,#ads2-wrapper{display:none}
.related-post-style-3 .related-post-item {width:110px;margin-right:10px}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font:11px Oswald}
#sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;}
#sidebar-wrapper img{max-width:100%; height: auto; width: auto}
.breadcrumbs{height:auto;line-height:30px}
.breadcrumbs a{display:inline-block;background-image:none;}
.comment_name a {font: 18px Oswald}
}

Selesai... silahkan save template-nya dan lihat hasilnya.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments