› ›

Modifikasi Komentar Kompi Males Tanpa Avatar

Kamis, 28 Juni 2018 Add Comment Edit
Setelah kurang lebih 1 pekan kemarin aku tidak dapat melaksanakan acara blogging menyerupai biasanya sebab ada sesuatu hal yang tidak dapat ditinggalkan, balasannya pada hari ini aku dapat menyempatkan menciptakan postingan untuk menjawab beberapa pertanyaan sahabat-sahabat KA.

Kali ini aku akan menjawab pertanyaan mas +Reo Adam  mengenai cara memodifikasi komentar template Kompi Males menjadi menyerupai komentar Kompi Ajaib yang sedang dipakai ketika ini.

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

pekan kemarin aku tidak dapat melaksanakan acara blogging menyerupai biasanya sebab ada ses Modifikasi Komentar Kompi Males Tanpa Avatar


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

Langkah Pertama
Silahkan cari instruksi menyerupai di bawah ini lalu hapus instruksi tersebut.

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

Langkah Kedua
Silahkan cari instruksi CSS comment-nya menyerupai 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/AVvXsEjzLaokqX2xRD4JRE8Aa1FdpAp18Bn0II7UYYGAp9NU-QSq6ucrZq7akNFe7rcvHZWNvB7f-gRI3RzsR0gWprCaSHCavvj7wVLz5Ud3nI0BJncfB0tK6_w35daeofirNvrA9NLyr_hM8cg/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 instruksi CSS di atas dengan instruksi 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 instruksi di bawah ini dan hapus instruksi ,.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 instruksi 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 menyerupai 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.

Sumber https://www.kompiajaib.com/

0 Response to "Modifikasi Komentar Kompi Males Tanpa Avatar"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel