Nak Kotak Komen Hijau?

Erkk, ada juga blogger yang teringin nak kotak komen macam blog ini (sebelum bertukar). Kotak komen warna hijau nampaknya jadi perhatian. Saya tak tahu kenapa ia begitu menarik, tetapi kalau mahu kotak komen yang dimaksudkan, saya akan kongsikan kod CSS yang digunakan.

Nak Kotak Komen Hijau?

Tetapi mahu diingatkan bahawa, kotak komen hijau yang saya gunakan mungkin akan tampil berbeza di blog anda. Ada beberapa ubahsuai yang perlu dilakukan. Tapi ubahsuaian itu tidaklah terlalu berat saya fikir. Boleh je dilakukan dengan sedikit pemahaman mengenai kotak komen blogspot anda.

.comments {
clear: both;
background:#46A28D;
padding-left: 10px;
line-height: 1em;
}
.comments .comments-content a{
color:#ffffff ! important;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}
.comments .comments-content {
background:#46A28D;
color:#fff;
font-size: 12px;
margin-bottom: 10px;
margin-left: 5px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #8de1cd;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none ! important;
text-shadow:1px 1px 0px #000000;
margin:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration:none ! important;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8de1cd), color-stop(1, #46a28d) );
background:-moz-linear-gradient( center top, #8de1cd 5%, #46a28d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8de1cd', endColorstr='#46a28d');
background-color:#8de1cd;
}
.comments .comment .comment-actions a:active {
position:relative;
top:1px;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px;   font-size:12px; background:#7ABFAF;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
margin-left: 15px;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 550px;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
margin-left: 35px;

}
.comments .comments-content .loadmore a {
display: block;
padding: 5px 5px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 26px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 20px;
}
.comments .comment-block {
margin-left: 15px;
margin-right: 15px;
position: relative;
}

Salin kod CSS untuk komen di atas dan gantikan dengan CSS kotak komen anda. Kat mana bahagian CSS komen blogspot? Cari di sini ...

Cari (Search) atau Ctrl-F dalam HTML bagi ".comments". Highligh semua yang ada ".comments" dan ganti dengan kod CSS disediakan. Hanya yang berada di dalam CSS sahaja!! Jangan ganti kod yang bukan dalam CSS blogspot anda.

Silap atau salah tanggung sendiri ye. Saya tak jamin.

Selamat mencuba.

*p.s: Saya ada sediakan servis untuk buat benda-benda cam di atas. PM saya di Facebook jika mahu. Err of course dikenakan bayaran ...