Modifikasi Tampilan Threaded Comments Blogger

Modifikasi Tampilan Threaded Comments Blogger - Untuk sekarang ini banyak sekali pengguna blogger kembali menggunakan komentar blogger, jika sebelumnya banyak sekali menggunakan form komentar dari pihak ketiga ataupun menggunakan sistem komentar blogger dengan membuat sendiri dengan tujuan menjadi lebih baik.

Kesemuanya itu dengan tujuan supaya komentar blog menjadi lebih baik dari fungsi serta tampilannya, untuk sekarang ini blogger menyajikan sistem komentar dengan sistem berbalas (threaded comments) yang lebih baik dengan tanpa popup form komentar. Walaupun begitu kalau dilihat dari segi tampilannya style), threaded comments blogger belum begitu baik (menurut saya), karena terlihat begitu polos dan sederhana.

Dengan tampilan tersebut tidaklah menjadi penghalang untuk kita bisa berkreasi untuk memperbaiki tampilan threaded comments blogger tersebut menjadi lebih baik (menurut kesesuaian tampilan yang kita inginkan). Threaded comments blogger bisa kita modifikasi dari segi tampilannya hanya dengan menambahkan css didalamya.

Dibawah ini merupakan css dan screen shot dari hasil modifikasi tampilan threaded comments blogger.

Tambahkan css dibawah ini dibawah <b:skin><![CDATA[

CSS

#comments h4 {
  margin: 0;
  font-size: 22px;
}
.comments .comment-block {
  margin-left: 0;
  position: relative;
}
.comments .comments-content .user a {
  font: normal 16px Arial, Helvetica, sans-serif;
  margin-bottom: -3px;
  color: black;
}
.comments .comments-content .icon.blog-author {
  display: inline-block;
  height:20px;
  margin:0 0 -4px 6px;
  width:100px;
}
.comments .comments-content .icon.blog-author:before {
  content: "\2764 Admin";
  line-height: 20px;
  position: absolute;
  top: 5px;
  text-align: center;
  font:normal 20px "Brush Script", "Brush Script MT", "Comic Sans", "Comic Sans MS", serif;
  color: #ebebeb;
}
.comments .comments-content .datetime {
  font-size: 10px;
  line-height: 10px;
  display: block;
  margin: -5px 10px 0 0;
}
.comments .comments-content .datetime a, .comments .comments-content .datetime a:hover {
  color: #ebebeb;
  text-decoration: none;
}
.comments .avatar-image-container {
  padding-left: 0;
  margin: 5px 10px 5px 0;
  max-height: 48px;
  width: 48px;
  float: right;
  z-index: 9;
}
.comments .avatar-image-container img {
  border: 3px solid #ebebeb;
  border-bottom: 5px solid #ebebeb;
  max-width: 44px;
  width: 44px;
  border-radius: 2px 2px 0 0;
  display: block;
}
.comments .comments-content .comment,.comments .avatar-image-container {
  padding: 4px;
}
.comments .comments-content {
  margin-bottom: 10px;
}
.comments .comments-content .comment {
margin: 0 5px 0 40px;
}
.comments .comments-content .comment-content {
  padding: 10px 10px 30px 10px;
  margin: 15px 0 -18px -25px;
  position: relative;
  background-color: #ebebeb;
  color: black;
  font: normal 16px Arial, Helvetica, sans-serif;
  height: auto;
  border-radius: 3px;
  box-shadow: inset 0px -20px 0px #e0e0e0;
}
.comments .comments-content .comment-content:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 20px;
  border-width: 0 0 12px 8px;
  border-style: solid;
  border-color: transparent transparent #ebebeb transparent;
}
.comments .comment .comment-actions a {
  position: relative;
  background-color: #999;
  color: #ebebeb;
  margin: 0 10px 0 -7px;
  border-radius: 3px 3px 0 0;
}
.comments .comment .comment-actions a, .comments .continue a {
  font: bold 12px Arial, Helvetica, sans-serif;
  padding: 3px 10px;
  text-align: center;
}
.comments .continue {
  cursor: pointer;
  display: inline-block;
  margin: 0 125px 0 39px;
  background: #ebebeb;
  width: auto;
  border-radius: 0 0 3px 3px;
}
.comments .continue a:hover,.comments .comment .comment-actions a:hover {
  color: black;
  text-decoration: none;
}
.comments .comments-content .comment-thread ol {
  margin: 0 0 0 -10px;
  overflow: hidden;
}
.comments .comments-content .comment-thread {
  margin: 0;
  background: #999;
}
.comments .comments-content .comment-replies {
  margin-left: 0;
  margin-top: 0;
}
.comments .comments-content .comment-header {
  position: relative;
  min-height: 37px;
  line-height: 37px;
  padding-left: 10px;
}
.comments .thread-toggle {
  cursor: pointer;
  display: none;
}
.comments .thread-toggle .thread-arrow {
  width: 7px;
  height: 7px;
  padding-right: 4px;
}

Tampilan threaded comments tersebut diatas mungkin tidak cocok dengan kesesuaian ataupun dengan desain template yang dipergunakan, untuk itu kalian bisa melakukan kesesuaian dengan memodifikasi ulang tampilan threaded comments blogger tersebut.

Semoga berguna.