\

Modifikasi Tampilan Blogger Threaded Comments

\ \ 12 comments
Tutorial Blog

Dilanjut lagi tutorialnya setelah berbagi tutorial tentang mengaktifkan Blogger Threaded Comments, kali ini saya akan berbagi tutorial untuk memodifikasi tampilan Threaded Comments tersebut. Kenapa dimodifikasi, ya alasannya supaya tampilannya lebih menarik, terutama bagi sobat yang hobinya suka modifikasi template. Mungkin tutorial ini cukup menarik bagi sobat yang hobinya ngutak-ngatik jeroan template. Nih langkah-langkah untuk modifikasinya.
Untuk langkah awal gak usah saya sebutin lagi ya, langsung ke Edit HTML nya aja.
Backup template sobat lalu centang expand template widget.
Lihat baik-baik pada template sobat, setelah Threaded Comments aktif pada blog sobat maka akan ada kode seperti ini pada template sobat.
<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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/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>
 Tandai kode di atas kemudian ganti dengan kode berikut.
<b:includable id='threaded_comment_css'>
  <style>
/* START of Blogger Threaded Comments By MBT */

.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 .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;

}
.comments .comment .comment-actions a:hover {
  text-decoration: none; background:#5AB1E2; 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 .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: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: 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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&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;
  }
}
/* End of Blogger Threaded Comments By MBT */
  </style>
</b:includable>
 Simpan template sobat.

Catatan:
  • Untuk mengganti warna background tombol reply pada kondisi aktif edit 1F9EE5
  • Untuk mengganti warna background tombol reply saat kondisi hover edit 5AB1E2
  • Untuk mengganti warna huruf pada tulisan Reply edit ffffff
  • Untuk mengganti warna background pengomentar Reply edit EBF5FE 
Sekian tutorial kali ini, salam blogger dan wassalam.

Credit: http://www.mybloggertricks.com/2012/01/blogger-threaded-comments-for-custom.html
Labels:

Artikel Sejenis

loading..

12 comments:

  1. Anonim8 Mar 2012, 08.56.00

    Test a comment :)

    BalasHapus
  2. RELOAD.ID12 Mar 2012, 01.16.00

    nice kk..

    oemar berhasil mencobanya.. :D

    BalasHapus
  3. Unknown12 Mar 2012, 05.26.00

    @Oemarya,, makasih udah berkunjung

    BalasHapus
  4. Unknown18 Mar 2012, 12.00.00

    Gan, klo tampilan comment-nya kayak yang di atas gimana yah? mohon bantuan dan pencerahannya, gan di christio_h@yahoo.com, thx

    BalasHapus
  5. Unknown24 Mar 2012, 12.00.00

    @Christio kalo komen yang di blog ini cek disini sob Unofficial Blogger Threaded Comments

    BalasHapus
  6. Miftah Farid15 Jun 2012, 16.33.00

    Makasih banyaaak,, aku coba dulu yaaa

    BalasHapus
  7. Unknown21 Sep 2012, 15.02.00

    punya saya ko' ga bs sob...?

    BalasHapus
    Balasan
    1. Unknown21 Sep 2012, 20.26.00

      Bisa kok sob,,,asal threaded comment aktif bisa kok sob,,,
      tp desain tampilannya gak kayak yang seperti di blog ini,,,

      Hapus
  8. Hermanbagus24 Sep 2012, 18.21.00

    keren sob, tapi kok g ada kode diatas itu ya di blog q?

    BalasHapus
    Balasan
    1. Unknown25 Sep 2012, 07.39.00

      Blog sobat sudah menggunakan threaded comments dari blogger apa belum,,?

      kalau sudah biasanya di dalam struktur template sobat pasti ada kode yang di atas...

      Hapus
    2. Hermanbagus25 Sep 2012, 17.18.00

      sudah sob, tapi memang gak ada yang kode diatas itu, jadi sayaa modif manual dengan menambahkannya diatas ] ] < b:skin itu .., ya uda makash ya sob, main main ke blogku , aku tunggu wajahnya muncul di blogku :)

      Hapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">Kode Anda</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">Kode Panjang Anda</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL Gambar</i>
Untuk menyisipkan judul, gunakan tag <b rel="quote">Kata-kata Anda</b>