Membuat Komentar di blogger seperti Komentar Facebook

Membuat Tab Comentar di blogger seperti Komentar Facebook | Hai sobat blogger selamat datang lagi di Winsoftcom.blogspot.com kali ini saya akan berbagi kode untuk pembuatan Komentar di blogger menyerupai dengan komentar Facebook,bagi anda Facebooker pasti sudah tahu dong bagaimana komentar yang berada di Facebook dan anda juga para Facebooker sudah tahu bagaimana Tampilan komentar yang berada di Facebook,nah sekarang mari kita membahas bagaimana kita para blogger bisa membuat tampilan Komentar Blogger anda seperti menyerupai dengan Facebook silahkan anda ikuti langkah-langkahnya di bawah ini

1. Masuk Ke Blogger.com
2. Kemudian pilih template
3. Lalu Masuk ke Edit HTml
4. Letakan kode berikut sebelum kode ]]></b:skin> untuk memudahkan pencarian silahkan menggunakan CTRL+F
5. Dan Save Template anda

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

.comments {
  font:normal 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:inherit !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0;
  padding: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;
  padding:0;
  border:none;
  background:none;
}

.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 {
  float:none;
  display:block;
  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%;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
}

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

Silahkan coba anda lihat hasilnya semoga artikel ini bermanfaat untuk anda,selamat mencoba dan semoga berhasil.

iklan 5

iklan 6