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.
Pada contoh di atas, ukuran foto pengomentar utama dan ukuran font komentar lebih besar ketimbang reply, warna stabilo author pun juga beda.
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
