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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGgmXfoDudbb2O4Qd-1Yy-D49rrUx3UDWQXQX8fC31Ijw_xZhEXcJ0Nqi0iX6z47uWntR_155E9hyphenhyphenYjdMnQxSqoYClfopy9E-0I2fc0SH_CKYZOFbpcltWgF9_7Nm8HF1KWzsmXJ7Gdm0/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 'PT Sans Narrow'; 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('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') 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 "Open Sans","Trebuchet MS",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:"";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 'PT Sans Narrow'; 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('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') 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 "Open Sans","Trebuchet MS",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:"";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. Mudah bukan? :]
0 Response to "Modifikasi Komentar Kompi Males Tanpa Avatar"
Post a Comment