CSS Komentar Blogger Seperti Komentar Google+

CSS Komentar Blogger Seperti Komentar Google+ - Pasti kalian sudah pernah melihat/memakai komentar google plus kan? sekarang saya mau berbagi "CSS Komentar Blogger Seperti Komentar Google+" sepertinya css ini sangat menarik untuk digunakan dan yang pastinya CSS Komentar ini seperti Komentar Google+.
Cara pemakaiannya cukup mudah, hapus semua CSS Komentar Blogger yang anda pasang, lalu anda ganti dengan CSS Komentar ini

.comments{border:1px solid #ccc}
.comments .comment-block{margin-left:90px}
.comments .comments-content .user{    color:#262626;         font-style:normal;     font-weight:bold; font-size:13px; font-family:arial}
.comments .comment-replybox-thread{    margin-left:20px;     margin-top:5px}
.comments .comments-content .comment-content{    color:#262626;     font-family:arial; padding-right:25px; font-size:13px; text-align:left}
.comments .comments-content .comment{border-bottom:1px solid #EEE}
.comments .comments-content .comment-header, .comments .comments-content .comment-content{    margin:0}
.comments .comments-content .icon.blog-author{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCnETU-VSJVm8g6akmBnzDj7lFge-iIewgO2RNjFozSWvXbRRIoLE-POmxwqOr5TvahWrZ3MbrW9NcTIDKhAgB8XWubdwQRV9qmek9r2KbPCn_3nGc5UF_3NgsyzTUiVNBGimV9WpBkk/s320/author.png) no-repeat;}
.comments .comments-content .datetime{    color:#999;     font-family:arial;     font-size:11px;     margin-left:6px}
.comments .comments-content .datetime a:link{color:#999}
.comments .comments-content .datetime a:visited{color:#999}
#comments h4{  background:none repeat scroll 0 0 #EEE;     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 img{    max-width:50px}
.comments .avatar-image-container{    float:left;     max-height:50px;     overflow:hidden;     width:50px}
.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:#FFF;  display:block;  float:left;  font-size:20px;  height:50px;  margin-left:20px;  text-align:center;  width:50px}
.comments .avatar-image-container img{ width:50px}
#comments-block.avatar-comment-indent{ margin-left:4px;  position:relative}
ol #comments-block li{ border-bottom:1px solid #EEE;  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}

nah, jika sudah anda terapkan, silahkan anda save.
ok cukup sampai sini dulu, karna dah malem, semoga artikel ini bermanfaat / berguna untuk anda.

Code by : TheMasDoyok

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Friday, 16 August 2013 — 10 Comments — tutorial blog