Modifikasi Komentar Kompi Males Tanpa Avatar

Modifikasi Komentar Kompi Males Tanpa Avatar

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

49 Comments Add Comment

Pertamaxxx ,
langsung sy terapka mas adhy :p

Balas

ijin tes drive mas...! sapa tau loading-nya jadi sedikit lebih ringan

Balas

Mantap, pengaruhnya untuk masalah loading mungkin ya :)
di copy :)

Balas

Izin pke Mas scripnya...

Balas

Silahkan mas Alung :)

Balas

Iya mas silahkan dicoba :) jangan lupa pakai sabuk pengaman :p

Balas

Iya mas untuk mengurangi beban loading blog :)

Balas

Silahkan mas :) semoga bisa dimengerti :)

Balas

kapan2 saya cobanya mas, tapi saya masih senang yg ada profil avatarnya utk sementara ini, hehehe :D

makasih sdh berbagi :)

Balas

salam sukses mas. Saya ijin menerapkan ya. Untuk menambah fast load blog :]

Balas

hasilnya menjadi lebih ringan ya mas loadingnya krn puluhan gambar avatar hilang semua, hmmm hrs segera dicoba juga nih kalau sdh senggang :)

oya maaf menyimpang dikit mas Adhy, gimana caranya pasang iklan disamping artikel postingan pada paragraf pertama itu ya mas agar iklannya gak ikutan nongol di homepage utk kompi males :D

makasih sebelumnya :)

Balas

terimakasih mas Adhy
kalo pake cara diatas tapi avatar komen tetap ada,kode mana yg harus di perbaharui?

Balas

Kunjungan perdana mas Ady. Izin nyimak dan belajar dulu. Menarik sekali buat meringankan loading, mas. Terima kasih tutorialnya.

Balas

Betul mbak maksudnya begitu biar loading blog lebih ringan.
Boleh mbak besok saya posting caranya.

Balas

Silahkan mbak... ini hanya sebagai alternatif untuk mengurangi beban blog :)

Balas

Silahkan dicoba mas, semoga bisa dimengerti.

Balas

jika begitu, lewati langkah pertama kemudian pada kode CSS comment barunya perbesar margin-left untuk .comment_name dan .comment_date dan tambahkan kode CSS dari CSS comment lama yang berhubungan dengan avatar seperti .comment_avatar, .comment_avatar *, .comment_child .comment_avatar, .comment_child .comment_avatar *

Balas

Sama-sama uda, semoga bisa dimengerti. :)

Balas

sudah mas,tapi saya cuma masukan comment avatar lalu merubah sedikit pada margin-left nya.
berhasil,makasih mas

Balas

maksudnya berhasil,tapi tetap menggunakan avatar
itu komen diatas salah ketik :D

Balas

kalo kaya gini kan bisa lebih ringan dan simpel hehe mantap kang :)

Balas

Di templte saya ga css seperti yg mas Adhy sebut diatas.. jadi saya belum bisa terapinnya.. ada solusi lain mas?

Balas

Pokoknya pertamax Kanggggg..salam untuk keluarga.

Balas

Jadi lebih ringan yah Kang Adhy, tapi avatar profilnya jadi hilang
yah Kang?, Coba nanti saya pertimbangkan jika berminat nanti
saya coba, makasih Kang Adhy :)

Balas

Mantapzzz pisan kang .. biar loading jadi dewa hehe

Balas

Bener juga ya kalau avatarnya ilang otomatis browser ga perlu nge reload file img avatarnya, sehingga load pagesnya jadi lebih ringan. Kapan - kapan saya coba terapkan diblog saya kang. Boorkmark dulu. Numun mas kang adi.

Balas

hanya bisa menyimak kang
.

Balas

Saya perhatikan banyak sekali teman teman blogger yang pakai template ini. Keren pokonya Kang.. harus di update terus biar lebih sempurna :)

Balas

Heheheehe betul kang :)

Balas

Solusinya harus memahami CSS sama HTML komentar blognya mas. Harus mengetahui kode html mana yang berfungsi menampilkan avatarnya.

Balas

Iya mas Icah makasih... salam juga buat keluarga di sana.

Balas

Betul apa yang dikatakan mas Adit :) kira2 seperti itu.

Balas

Heheheehe jadi dewa loading ya kang :)

Balas

Silahkan mbak :)

Balas

Iya kang silahkan :)

Balas

Iya kang makasih support-nya :)

Balas

menurut aku template kompi males sepertinya cukup ringan loadingnya, nyatanya aku juga menggunakan kompi males kang. :)

Balas

dengan cara ini pasti watu memuat blog jadi lebih lebih cepat ya kang..
tapi karena komentar jumlah komentar di blog saya masih belum sebanyak punya akang, jadi ane pertahanin dulu deh avatarnya..
maasih kang infonya :-d

Balas

Kang saya suka sama tampilannya ..
Saya inginnya menggunakan avatar .. soalnya stylenya keren Kang .. Hehehe ..
Gimana Kang .. ??

Balas

Nggak jadi Kang udah bisa ..
Ganti pertanyaan ..
Cara memperkecil besar avatarnya gimana nih Kang , udah saya coba ganti width dan heightnya malah berantakan .. SS : http://goo.gl/3Bnchj . Makasih Kang ..

Balas

kang kalau cara agar sidebar kompi males tampil semua tanpa disembunyikan gimana?

Balas

Maksutnya di Halaman Statis juga Muncul gitu ?

Balas

saya nyerah deh pengen pake gaianya kang Reo..masukin kode avatarnya ngga ng'pas...akhirnya pake kaya kang kompi deh...malah jadi kliatan lebih pinter....kliatannya doangan seh...:p

Balas

Kalau untuk Blogger Threaded Comments Hack V.3 bisa diterapkan tidak mas? kalau bisa, langkah pertama saja ya mas yang harus di ikuti & sisanya tinggal menyesuaikan tampilan?

Balas

bukan itu maksudnya kang, yang widget popularposts, facebook sama googleplus itu lho biar nggak bisa disembunyiin.
Maaf kalau pertanyaannya kurang jelas. Oiya saya juga punya pertanyaan di forum tentang tag pre. Mohon bantuannya :-d

Balas

berhasil juga akhirnya ngemodif kolom komentarnya kang...nuhun ah

Balas

Ijin ikut update threaded-comment sesuai post Kompi Ajaib pada "modifikasi komentar kompi males tanpa avatar".
Semoga berhasil ya mas Adhy Suryadi. Terima kasih saya ucapkan. Semoga sukses dan tambah sukses buat Kompi Ajaib, mas Adhy.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×