Modifikasi ke-2 Kotak Komentar Blog

Kawan masih ingat dengan Artikel saya tentang "Modifikasi Kotak Komentar mirip Thread Comments" yang hasilnya kurang lebih seperti Gambar berikut :D


Sekarang saya akan mencoba Memodikasi lagi biar kelihatan lebih jelas sebagai Admin dan Kotak Komentarnyapun terbalik dengan dulu, coba perhatikan gambar berikut dan khususnya tanda petunjuk yang berwarna putih garis merah

Caranya :

  1. Masuk Account Blogger dengan ID kawan
  2. Pada Perancang Template pilih Edit HTML
  3. Cari Kode Css Comment yang scriptnya kurang lebih seperti berikut :
#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-weight:normal;
line-height:1.3em;
background: #000;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 525px;
background: transparent;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:465px;
background: #95CAFF;
color: #00F;
font-size:12px;
margin:0 5px;
padding:0;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display:none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw5RRyFsEp1j4pbEFODbqZUg7XEk-jlYYjlzjN2LlJsNiI19EV4dn3xyzcboMwF6K1eA73Tr_oVvAB4PP85MzX-sQvMwUOfIdfYfsQP1TUk41FVu3OYn7tjSFT_8nvnZ16w-Q31Uxjg/s1600/no-avatar.png);
}
.comment-form{
width:450px!important;
max-width:450px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 1px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Hapus semua script tersebut dan ganti dengan :
#comments{
clear:both;
float:left;
width:555px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
background: -moz-linear-gradient(top,  rgb(99,147,193) 100%, rgb(207,231,250) 0%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgb(99,147,193)), color-stop(0%,rgb(207,231,250)));
background: -webkit-linear-gradient(top,  rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: -o-linear-gradient(top,  rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: -ms-linear-gradient(top,  rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: linear-gradient(top,  rgb(99,147,193) 100%,rgb(207,231,250) 0%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 );
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-family: Arial Narrow;
font-weight:normal;
line-height:1.2em;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 485px;
background: #95CAFF;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:545px;
background: #D4E3EA;
color: #00F;
font-size:12px;
margin: 0;
padding:0 5px;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display: none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw5RRyFsEp1j4pbEFODbqZUg7XEk-jlYYjlzjN2LlJsNiI19EV4dn3xyzcboMwF6K1eA73Tr_oVvAB4PP85MzX-sQvMwUOfIdfYfsQP1TUk41FVu3OYn7tjSFT_8nvnZ16w-Q31Uxjg/s1600/no-avatar.png);
}
.comment-form{
width:480px!important;
max-width:480px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 0px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

  • Simpan Template kawan 
  • Saya ingatkan kawan bahwa modifikasi ini merupakan lanjutan modifikasi sebelumhnya 
  • Lebar Kotak Komentar Blog kawan silahkan disesuaikan




Description: Modifikasi ke-2 Kotak Komentar Blog - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Modifikasi ke-2 Kotak Komentar Blog


Kawan sedang berada pada Artikel
» Modifikasi ke-2 Kotak Komentar Blog
di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
asal kawan menyertakan Link / Sumber Artikelnya

Artikel Menarik Lainnya :


Comments
4 Comments

4 komentar pada : “Modifikasi ke-2 Kotak Komentar Blog”


  1. wah boleh juga nih di coba, tapi kalau yang threaded bawaan blogger gimn ya..?

    ReplyDelete
    Replies
    1. Itu memang Threaded bawaan blogger yang saya modif, karena css tersebut sekarang tidak ada di semua Template Blog saya

      Delete
    2. Beneran itu komen threaded asli dari blogger yang di modif. . .?

      Delete
    3. benar kawan, Kotak komentar saya ini pakai threaded dimodif tapi bukan artikel diatas ini, silahkan baca dan amati cssnya pada "modifikasi ke-2 css thread comments"

      Delete
KOMENTAR MENCERMINKAN KEPRIBADIAN KAWAN BLOGGER
EKSPRESIKAN KOMENTAR DENGAN EMOTICON :

:a :b :c :d :e :f :g :h :i :j :k :l :m
:n :o :p :q :r :s :t :u :v :w :x :y :z