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 ...

16 Comments

Komen adalah tanggungjawab anda. Tertakluk pada Akta 588 SKMM. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

kuchalanaOctober 8, 2013 at 10:17 AM
adeh dh tukar kaler lain plak..ha3
UnknownOctober 8, 2013 at 10:18 AM
ooo kotak dah bertukar oren...tq for sharring
ZamOctober 8, 2013 at 10:45 AM
cun.. mcm tu cr buat rupanye
BinMuhammadOctober 8, 2013 at 10:57 AM
Menarik...boleh tukar2. Memberi impak kesegaran! Thx HH
SukmaOctober 8, 2013 at 12:22 PM
boleh tukar-tukar yea HH...i like oren...lepas nie purple laks....hihi
sitirohaidaOctober 8, 2013 at 3:22 PM
bertukar kepada orange ye kotak komen..good job HH..x mmbuatkn org bosan..
.::: Princess MOMOY :::.October 8, 2013 at 8:15 PM
thx u bro. mmg dah lama tunggu tutor nih
mselim3October 8, 2013 at 9:38 PM
Assalammualaikum,,,tutorial yg menarik... tutorial yg mudah faham terima kasih...bro HH.

mselim3
Dayang DenoOctober 9, 2013 at 3:03 AM
wahh... dah bertukar warna la.... :) terima kasih ya, deno nak cuba lah :)
Dayang DenoOctober 9, 2013 at 4:03 AM
terima kasih !! dah jadi! yeay! ^_^