Modifikasi Kotak Komentar Blog Dengan Tema Facebook

 

kali ini Miev share,Tips dan trik seputar Blogger,di sini Miev akan Memposting tips dan trik bagaimana memodifikasi Kotak Komentar Blog dengan Tema Facebook,dan sebelumnya Miev share tentang Menciptakan Efek Blur pada Halaman Blog dengan CSS Gradient . langsung saja masuk ke langkah langkah di bawah ini

1. Masuk ke halaman Edit HTML Template pada blog sobatMiev :

 

2. Cari  kode ]]></b:skin>

3. Salin kode CSS di bawah ini dan letakkan di atasnya:

/* CSS Komentar Blogspot - Tema Facebook
 * Selengkapnya: https://plus.google.com/108949996304093815163/posts
 */

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  color:rgb(51,51,51);
}

.comments .comments-content a {
  color:#3B5998 !important;
}

.comments h2,
.comments h3,
.comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 10px;
  border-top:1px solid #e9e9e9;
  border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
  margin:0 0 0;
  padding:0 0 0;
  border:none;
  background:transparent;
}

.comments .comment .comment-header {
  margin-bottom:4px;
}

.comments .comment .comment-header .datetime a {
  color:#808080 !important;
}

.comments .comment .comment-actions a {
  padding-right:5px;
}

.comments .thread-toggle .thread-arrow {
  width:7px;
  height:7px;
  padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {
  margin:0 0 0 60px !important;
}

.comments .comment .comment-thread.inline-thread {
  margin:7px 0 0 22px;
}

.comments .comment .comment-thread.inline-thread ol {
  margin:7px 0 10px !important;
}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
  width:32px;
  height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
  margin:0 0 0 40px !important;
}

.comments .comment .comment-content {
  text-align:left;
}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;
}

.comments .comment .comment-thread.inline-thread .comment:last-child {
  border-left:2px solid #A8B2CE !important;
}

Klik Simpan Template dan lihat hasilnya:

Lihat DEMO

Semoga Artikel ini bermanfaat untuk sobatMiev

.

Posted in: CSS