Tuesday, October 14, 2014

Cara Mengubah Tampilan Komentar Pada Sistem Threaded Comments

Threaded comments biasa juga disebut dengan Komentar Berulir atau Komentar Bertingkat. Pada tingkat yang pertama, pengunjung bisa langsung memberikan atau mengirimkan komentar pada halaman yang dikunjunginya. Sedangkan pada tingkat yang kedua, pengunjung juga bisa membalas atau mengirimkan komentar pada komentar yang sudah ada sebelumnya pada satu halaman.

Blogger juga telah mendukung Threaded Comments. Ciri atau tanda khusus sebuah blog yang menggunakan sistem Threaded Comments adalah tampilnya tombol “Replay” pada form komentar blog tersebut

Sistem Threaded Comments

Pada kesempatan berikut ini, saya akan membagi artikel tentang bagaimana cara cepat dan praktis untuk mengubah atau mengganti tampilan komentar pada blog yang menggunakan sistem komentar threaded comments. Cara ini tergolong cara yang praktis untuk diterapkan pada blog. Jika Anda ingin mengganti atau merubah tampilan komentar tersebut, Anda bisa mengikuti cara di bawah ini. (Cara ini khusus untuk blog yang menggunakan komentar dengan sistem Threaded Comments)
  • Silakan login pada akun blogger Anda.
  • Selanjutnya, pilih “Template” lalu pilih “Edit Template”.
  • Cari kode ]]> </b:skin> pada template blog Anda. (Tekan tombol Ctrl+F pada keyboard komputer Anda untuk mempermudah pencarian kode)
  • Setelah menemukan kode ]]></b:skin>, copy lalu pastekan kode di bawah ini tepat di atas kode ]]></b:skin>. Kode tersebut adalah :
.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 70px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 'Cambria',Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 70px;
height: 70px;
max-height: 70px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 6px solid #EEEEEE;
border-radius:70px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 70px;
height: 70px;
max-width: 70px;
border:0 !important;
border-radius:70px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}
  • Silakan Anda klik “Pratinjau Template”. Jika pratinjau template blog Anda telah tampil sempurna, maka silakan Anda melanjutkan dengan mengeklik tombol “Simpan Template”.
      Pada tahap ini, Anda telah mengganti atau merubah tampilan komentar pada blog Anda.
      Catatan :
      • Untuk mengubah atau mengganti warna backround komentar, silakan Anda edit nilai # F9F9F9 pada bagian yang berwarna merah.
      • Untuk mengubah atau mengganti warna teks komentar, silakan Anda edit nilai # 555 pada bagian yang berwarna merah.
      • Untuk mengubah atau mengganti warna bayangan di sekitar komentar, silakan Anda edit # EEEEEE pada bagian yang berwarna merah.
      • Untuk mengubah atau mengganti lebar border (px), gaya (solid) dan warna (# EEEEEE) pada seluruh komentar, silakan Anda Edit 6px solid #EEEEEE pada bagian yang berwarna merah.
      • Untuk mengubah atau mengganti ukuran font komentar, silakan Anda edit 1.190em pada bagian yang berwarna merah.
      • Untuk mengubah atau mengganti ukuran avatar dan kebulatan, silakan Anda edit 70px pada bagian yang berwarna biru
      Demikianlah artikel tentang “Cara Mengubah Tampilan Komentar Pada Sistem Threaded Comments”, yang saya publikasikan pada blog Berbagai Artikel Menarik. Semoga artikel ini menarik dan bermanffat untuk Anda.

      Baca juga :
      Berbagai Artikel Menarik
      Share this article to your friends :

      4 comments:

      1. woow... panjang juga kodenya ya gan.. tapi boleh lah buat dicoba.. hhe. makasih buat sharing nya ya gan.. :)

        ReplyDelete
        Replies
        1. kode nya panjang, tapi gak memberatkan loading pada blog lho gan.... :) selain ringan, juga form komentar ini gak menambah error pada validasi css.
          sama-sama gan..., trima kasih juga atas kunjungan dan kementarnya. :-h

          Delete
      2. Kalau di blog saya sih udah otomatis ada mas :D

        ReplyDelete
        Replies
        1. waah... bagus juga ya blog nya. g-)
          gak perlu repot-repot lagi untuk mengubah tampilan komentar nya.
          trima kasih atas informasi dan kunjungannya ya mbak... :D

          Delete