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/AVvXsEgCGKoljLoHrKvH6gMTIzzgqwBOwjbi97Q75nyHKyHYjKNjyCQ_j9jr7awMAH8owDtZcLm8A_JScx7E2TBTZaSEMfCrjcvWbtUcDsEmtRilHEvuSMa5Lt4ELyXU3m4j6Qq42PnGz6NJduQ/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/AVvXsEgCGKoljLoHrKvH6gMTIzzgqwBOwjbi97Q75nyHKyHYjKNjyCQ_j9jr7awMAH8owDtZcLm8A_JScx7E2TBTZaSEMfCrjcvWbtUcDsEmtRilHEvuSMa5Lt4ELyXU3m4j6Qq42PnGz6NJduQ/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




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



MAU IKLAN ANDA TAMPIL DISINI

  1. system of blog mengatakan...:

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

    » Balas 6 Maret 2012 pukul 02.00
  1. KONE mengatakan...:

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

    » Balas 6 Maret 2012 pukul 02.13
  1. system of blog mengatakan...:

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

    » Balas 14 Maret 2012 pukul 02.08
  1. KONE mengatakan...:

    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"

    » Balas 14 Maret 2012 pukul 04.34

Posting Komentar


 
Copyright © Main Kolom 21. All rights reserved
Powered by : Blogger
Dirancang oleh :
BLOGGER EDAN