hannah anisa Tukang share ilmu bermanfaat dan suka membantu orang kesulitan dengan artikel yang mudah dipahami. Happy Reading (:

Cara Modifikasi Tampilan Desain Threaded Comment di Blogger

2 min read

Modifikasi design Threaded Comments di blogger adalah salah satu cara untuk memperindah dan mempercantik tampilan comment pada postingan blog. Namun sebelum itu apa yang dimaksud dengan threaded comments, merupakan sebuah desain komentar yang sudah dimodifikasi agar lebih berstyle dan membuat balasan komentar menjadi bertingkat.

Cara Modifikasi Tampilan Desain Threaded Comment di Blogger

Desain Threaded Comments di setiap blog berbeda-beda tergantung css mereka yang digunakan, kali ini saya akan memberikan tips bagaimana cara tampilan komentar pada blog lebih menarik dan bertingkat. Pada desain tampilannya akan lebih ringan, sederhana, dan pemasangannya juga sangat mudah.

Gambar berikut ini adalah contoh yang nantinya akan tampil pada blog anda. Lalu apa maksud dari komentar bertingkat? perhatikan gambar tersebut di setiap balasan komentar yang di dapatkan dari komentar pertama akan terletak lebih masuk ke kanan dalam. Terus, bagaimana tutorial cara memasang threaded comments di blog? Oke tanpa basa-basi lagi mari simak langkah pemasangan threaded comments di blogspot pada berikut ini.

Cara Memasang Threaded Comment Keren di Blog

Langkah pertama yang harus anda lakukan adalah login dan masuk ke dalam dashboard blogger anda. Kemudian pilihlah menu Template > Edit HTML.

Langkah berikutnya, silahkan tambahkan kode berikut ini tepat di atas kode ]]></b:skin> atau </style>.


.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.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: #444;
}

.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}

.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;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.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 .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 {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Langkah selanjut, carilah kode seperti kode di bawah ini.

<b:include data=’post’ name=’comments’/>

Lalu ganti kode tersebut dengan kode berikut ini.

 




Langkah akhir, silahkan simpan template anda. Jika sudah, maka lihat hasilnya pada postingan blog anda.

Demikianlah bagaimana cara memasang dan memodifikasi design comments di blog. Semoga bermanfaat.

hannah anisa Tukang share ilmu bermanfaat dan suka membantu orang kesulitan dengan artikel yang mudah dipahami. Happy Reading (: