Mengedit CSS Pada Tampilan Threaded Comments Blogger

Mengedit CSS Pada Tampilan Threaded Comments Blogger - Bagi pengguna Threaded Comments Blogger tentunya Anda tahu kalau tampilan pada komentar baru ini sedikit dibilang kurang menarik ditambah tidak ada thumbnail gambar pada profile yang berkomentar, khususnya untuk pengguna Template Default Blogger (TDB). Untuk itu saya akan mengedit CSS-nya agar tampil lebih menarik.

Sebenarnya sudah banyak user Blogger yang menggunakan template hasil modifikasi sendiri dan sudah mulai menjauhi TDB, tentunya TDB dinilai kurang variatif dalam segi penampilan walau sebenarnya TDB lebih ramah SEO dan pasti responsive. Namun disini saya akan membahas seputar komentar Threaded Comments Blogger pada TDB maupun template hasil modifikasi, berikut tampilan demonya.

Tampilan sebelum diedit:

Screenshot & source by: Blog Kang Ismet

Tampilan sesudah diedit:

Screenshot & source by: Blog Kang Ismet

Tentu lebih menarik dan mempunyai kesan menawan dan elegan bagi siapa saja yang melihatnya.

Cari kode berikut:

<b:includable id='threaded_comment_css'>     
  <style>     
.comments {     
  clear: both;     
  margin-top: 10px;     
  margin-bottom: 0px;     
  line-height: 1em;     
}     
.comments .comments-content {     
  font-size: 13px;     
  margin-bottom: 16px;     
}     
.comments .comment .comment-actions a {     
  padding-top: 5px;     
  padding-right: 5px;     
}     
.comments .comment .comment-actions a:hover {     
  text-decoration: underline;     
}     
.comments .comments-content .comment-thread ol {     
  list-style-type: none;     
  padding: 0;     
  text-align: left;     
}     
.comments .comments-content .inline-thread {     
  padding: 0.5em 1em;     
}     
.comments .comments-content .comment-thread {     
  margin: 8px 0px;     
}     
.comments .comments-content .comment-thread:empty {     
  display: none;     
}     
.comments .comments-content .comment-replies {     
  margin-top: 1em;     
  margin-left: 36px;     
}     
.comments .comments-content .comment {     
  margin-bottom:16px;     
  padding-bottom:8px;     
}     
.comments .comments-content .comment:first-child {     
  padding-top:16px;     
}     
.comments .comments-content .comment:last-child {     
  border-bottom:0;     
  padding-bottom:0;     
}     
.comments .comments-content .comment-body {     
  position:relative;     
}     
.comments .comments-content .user {     
  font-style:normal;     
  font-weight:bold;     
}     
.comments .comments-content .icon.blog-author {     
  width: 18px;     
  height: 18px;     
  display: inline-block;     
  margin: 0 0 -4px 6px;     
}     
.comments .comments-content .datetime {     
  margin-left:6px;     
}     
.comments .comments-content .comment-header,     
.comments .comments-content .comment-content {     
  margin:0 0 8px;     
}     
.comments .comments-content .comment-content {     
  text-align:justify;     
}     
.comments .comments-content .owner-actions {     
  position:absolute;     
  right:0;     
  top:0;     
}     
.comments .comments-replybox {     
  border: none;     
  height: 250px;     
  width: 100%;     
}     
.comments .comment-replybox-single {     
  margin-top: 5px;     
  margin-left: 48px;     
}     
.comments .comment-replybox-thread {     
  margin-top: 5px;     
}     
.comments .comments-content .loadmore a {     
  display: block;     
  padding: 10px 16px;     
  text-align: center;     
}     
.comments .thread-toggle {     
  cursor: pointer;     
  display: inline-block;     
}     
.comments .continue {     
  cursor: pointer;     
}     
.comments .continue a {     
  display: block;     
  padding: 0.5em;     
  font-weight: bold;     
}     
.comments .comments-content .loadmore {     
  cursor: pointer;     
  max-height: 3em;     
  margin-top: 3em;     
}     
.comments .comments-content .loadmore.loaded {     
  max-height: 0px;     
  opacity: 0;     
  overflow: hidden;     
}     
.comments .thread-chrome.thread-collapsed {     
  display: none;     
}     
.comments .thread-toggle {     
  display: inline-block;     
}     
.comments .thread-toggle .thread-arrow {     
  display: inline-block;     
  height: 6px;     
  width: 7px;     
  overflow: visible;     
  margin: 0.3em;     
  padding-right: 4px;     
}     
.comments .thread-expanded .thread-arrow {     
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;     
}     
.comments .thread-collapsed .thread-arrow {     
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;     
}     
.comments .avatar-image-container {     
  float: left;     
  width: 36px;     
  max-height: 36px;     
  overflow: hidden;     
}     
.comments .avatar-image-container img {     
  width: 36px;     
}     
.comments .comment-block {     
  margin-left: 48px;     
  position: relative;     
}/* Responsive styles. */   
@media screen and (max-device-width: 480px) {     
  .comments .comments-content .comment-replies {     
    margin-left: 0;     
  }     
}     
  </style>     
</b:includable>

Ganti semua kodenya dengan kode berikut:

<b:includable id='threaded_comment_css'>
<style>
/*------------- START Blogger Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*------------- End of Blogger Threaded Comments  -------------*/
</style>
</b:includable>

Terakhir, SAVE template.

Bila tampilan CSS tidak sesuai dengan tampilan Threaded Comments Blogger Anda, silahkan Anda bisa edit sesuai keinginan..

Semoga Bermanfaat..