Utak-atik tampilan blog memang gak ada puasnya. Setiap saat kita pasti nyoba dan nyoba lagi. Biar gak bosen. Biar blog tetep fresh. Salah satu bagian yang wajib dimodifikasi adalah kotak komentar. Alasaannya serderhana, karena dibagian ini kita akan berinteraksi dengan banyak blogger lain. Jadi mereka harus bisa nyaman dong di blog kita.


Nah, kali ini kita akan memodifikasi agar tampilan/style komentar utama berbeda dengan komentar reply. Standard bawaan blogger CSS-CSS komentar reply akan sama dengan komentar utama. Jika Anda pengen membuatnya berbeda Anda bisa tambahkan CSS seperti contoh berikut:

CSS Komentar utama (sudah ada):
.comments .comments-content .comment-content {
background: #FFFFFF;
}

CSS Komentar reply (untuk ditambahkan):
.comment-replies .comment-content {
background: #EEEEEE !important;
}

Keterangan:
- Perhatikan yang berwarna merah dan hijau adalah perbedaannya.
- Pada CSS Komentar reply tambahkan !important agar CSS bekerja (Baca: Fungsi dan Pengertian !important)

Contoh CSS jadinya adalah seperti kode berikut ini. Anda bisa copy semuanya untuk mengganti CSS komentar yang ada di Blog Anda.

.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {  background: none repeat scroll 0 0 #EEEEEE;color: #262626;
    font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px;
font-style:normal; font-family:arial;}
#comments-block dt { margin: .5em 0;}
#comments-block dd { margin: .25em 0 0;}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%; display: none;}
#comments-block dd p {
  margin: 0 0 .75em;}
.comment-form {clear: both;
    margin-left: 20px; margin-top: -60px;width: 550px;}
.comments .avatar-image-container {
    float: left; overflow: hidden;}
.avatar-image-container {
background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block; float: left;font-size: 20px;
 margin-left: 20px;text-align: center;}
#comments-block.avatar-comment-indent {
    margin-left: 4px; position: relative;}
ol #comments-block li {border-bottom: 1px solid #EEEEEE;
    list-style:none;margin: 20px 0;
    z-index: -100;min-height:90px;}
#comments-block .comment_content {
    width: 500px;}
.deleted-comment {font-style:italic; color:gray;}

.comments .comments-content .comment-content {
color: #071585;font-size: 18px;margin-top: 10px;
line-height: 1em;text-align: left;}
.comment-replies .comment-content {
font-size: 13px !important; color:#000 !important;
margin-top:0px !important;}

.comments .comments-content .datetime {
font-size: 15px;}
.comment-replies .datetime {
font-size: 10px !important;} 

.comments .comments-content .user {
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comments .comments-content .user a,
.comments .comments-content .user a:link{
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comment-replies .user, .comment-replies .user a,
.comment-replies .user a:link {
font-size: 12px !important; padding:0pc !important;
background:#eee !important; color: #000 !important;}

.comments .comment-block {margin-left: 100px;}
.comment-replies .comment-block {
margin-left: 75px !important;}

.comments .avatar-image-container img {
width: 70px;}
.comment-replies  .avatar-image-container img {
width: 40px !important;} 

.comments .avatar-image-container {
max-height: 70px; width: 70px;}
.comment-replies  .avatar-image-container {
max-height: 40px !important; width: 40px !important;
}
 
.comments .avatar-image-container img {
max-width: 70px;}
.comment-replies .avatar-image-container img {
max-width: 40px; !important} 

.avatar-image-container {height: 70px;}
.comment-replies .avatar-image-container {height: 40px !important;}


Semoga bermanfaat dan mempercantik blog Anda :D
Item Description: Membuat Komentar Utama dan Reply Berbeda Gaya

Seringkali banyak pertanyaan dari blogger mengenai template, gadget atau SEO. Saya jawab sebisanya dan kadang-kadang saya posting agar bisa kita pelajari bersama. Nah, atas dasar itu, saya membuka kembali layanan lama yang dulu bernama MasDoyok Answers (baca: Memperkenalkan MasDoyok Answers) yang ikut hilang karena domain lama di banned. Sekarang TheMasDoyok Anwers hadir kembali dengan pengelolaan yang lebih baik.


Jadi... Ketika Anda memiliki masalah atau pertanyaan menyangkut blogging, Anda dapat dengan mudah akses TheMasDoyok Answers, tidak harus menunggu saya online di fb atau twitter. Saya akan berusaha menjawab secepatnya, dan mungkin beberapa teman yang ada disana juga bisa ikut membantu memberikan jawaban.

Sekarang juga, bisa dicek di alamat:
http://www.themasdoyok.com/p/answers.html

Bahan pembelajaran yang masuk juga akan saya arsipkan untuk kemudian diposting setiap minggunya. Semoga kedepannya semakin memudahkan dan banyak manfaat.

Juga mengenalkan, papan informasi TheMasDoyok di alamat:
http://www.themasdoyok.com/p/informasi.html

Kadang-kadang saya tidak mempunyai waktu untuk posting panjang mengenai info penting atau isu tertentu, Anda bisa cek terlebih dahulu disini dalam format info singkat dan padat. Sekali lagi, semoga bermanfaat.

NB: Tips Berinteraksi di TheMasDoyok Answers
Deskripsi Item: Tanya Jawab Blog di THEMASDOYOK Answers