Cara Modifikasi Tampilan Desain Threaded Comment di Blogger

Table of Contents

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.

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

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

Cara Memasang Threaded Comment Keren di Blog

Langkah pertama yang harus andalakukan adalah login dan masuk ke dalam dashboard blogger anda. Kemudianpilihlah menu Template > Edit HTML.

Langkah berikutnya, silahkantambahkan 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 kodeseperti kode di bawah ini.

<b:includedata=’post’ name=’comments’/>

Lalu ganti kode tersebut dengan kode berikut ini.

Langkahakhir, silahkan simpan template anda. Jika sudah, maka lihat hasilnya padapostingan blog anda.

Demikianlahbagaimana cara memasang dan memodifikasi design comments di blog. Semogabermanfaat.