SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Cara Modifikasi CSS Thread Comment

Artikel saya sebelumnya tentang Thread / Reply Comment Blogger Gaya  FB, yang tampilannya masih polos atau tanpa warna background artinya warna latar Komentar adalah transparan disamping jarak antara Komentar sedikit agak longgar, bagi saya pribadi sangat perlu di adakan perubahan  

Tampilan Thread Comment aslinya :
  • Tanpa warna latar belakang [background]
  • Komentar Admin [Replies dan Reply] dipinggir kanan agak masuk ke kiri seperti pinggir kiri Komentar
Cara Memodifikasi Thread Comment :
  • Masuk ke Account Blogger dengan ID kawan
  • Pada Perancang Template pilih Edit HTML
  • Beri tanda ceklist  disamping Expand Template Widget 
  • Sebaiknya Simpan dulu Template kawan
  • Cari kode <b:includable id='threaded_comment_css'> 
Kalau sudah ketemu mulai 
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
sampai ..................................................
...............................................................
...................................................dengan 
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
Hapus dan Ganti dengan 
Hasil Modifikasi Blog Bego
<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;
}
.comments .comment .comment-actions a {
  padding: 5px  5px 0 0;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
}
.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: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: -2px;
  margin-left: 36px;
width: 501px;}
.comments .comments-content .comment {
  margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
  padding-top:1px;
}
.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;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0;
}
.comments .comments-content .datetime {
float: right;
  margin-right:5px;
font-size: 11px;
color: #00F;
}
.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 {
background: transparent;
  cursor: pointer;
text-align: right;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
margin-left: 48px;
  font-weight: bold;
background: #95cafF;
color: #F00;
}
.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: inline-block;
}
.comments .thread-toggle {
background: #95CAFF;
  display: inline-block;
padding: 3px 0;
width: 100%
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 0;
}
.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;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
background: #95CAFF;
  margin-left: 48px;
padding: 5px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

Khusus untuk width: 501px; adalah lebar untuk Replies dan Reply silahkan disesuaikan dengan lebar Komentar Blog kawan atau bisa dihilangkan
Jangan lupa simpan Template kawan


15 komentar pada “Cara Modifikasi CSS Thread Comment”

  1. panjang banget CSsnya.. Mantab BGT dan 2 Jempol buat Om Putu haha

    BalasHapus
  2. @Bisnis Online Daftar Gratis Bonus Jutaan Rupiah css itu otomatis ada di Template, tapi sekarang sepertinya tak ada di Blog saya lain :D

    BalasHapus
  3. mantap nih tutorial tenteng komenatr berjenjang...
    coba tes dulu ah :)

    BalasHapus
  4. @widhi online trims kawan, setelah saya cek di blog lain sepertinya tidak semua ada threadnya :z

    BalasHapus
  5. kok artikelnya sama seperti blog yang satunya ya..

    BalasHapus
  6. @Said Arsyad benar, Blog yang satunya sumbernya dari sini :r

    BalasHapus
  7. Wah Masbro Keren Nihhhhhhhh blogX background slideshow, lanjtukan masbro, lama gak mampir

    BalasHapus
  8. @system of blog itu hasil karya senior kita Abu Farhan :z

    BalasHapus
  9. gan saya mau tanya ! punya saya nda ada kode kaya di atas trus gimana ya ? mohon penjelasannya gan

    BalasHapus
  10. @Yosse Kurnia Priandanu seperti jawaban saya sebelumnya script tersebut sudah tidak ada lagi di Template Blog :z

    BalasHapus
  11. hehe sudah mas ! sudah bisa saya :)

    BalasHapus
  12. om follow blog saya dong om ! hehe

    BalasHapus
  13. @Yosse Kurnia Priandanu okey nanti saya follow, maaf dulu ya kotak follow saya nggak tampil dari 2hari yang lalu

    BalasHapus
  14. makasi gan infonya saya coba kerjakan mulai besok saya akan kabarin hasilnya nanti

    BalasHapus
  15. best information gan ini yang saya butuhkan dari dulu

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger