Pada postingan sebelumnya tentang cara merubah tampilan komentar baru Blogger atau Threaded Comment (baca: Edit CSS Threded Comments Blogger), saya sudah menjelaskan bagaimana merubah tampilan dengan edit css standar blogspot. Akan tetapi, beberapa rekan blogger ada yang tidak menemukan kode tersebut. Singkatnya ketika sudah berubah kepada sistem komentar threded comment, ada yang otomatis tertanam kode CSS dan ada yang tidak.

Menambahkan Kode CSS Threaded Comments

Mungkin anda pernah bertanya-tanya, pada template saya tidak ada kode CSS untuk threaded comments, bagaimana solusinya?
Bagi anda yang mendapatkan hal seperti itu, silahkan ikuti beberapa langkah dibawah ini:

1. Masuk ke Dashboard
2. Edit HTML
3. Centang Expand Template Widget
4. Temukan kode ini (Gunakan Ctrl dan F untuk mempermudah pencarian):
<b:includable id='feedLinksBody' var='links'>
5. Tambahkan kode dibawah ini tepat sebelum <b:includable id='feedLinksBody' var='links'>
<b:includable id='threaded_comment_css'>
<style>
/*------------- START Blogger Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; 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 .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.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: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.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 {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.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  -------------*/
</style>
</b:includable>
6. Cari kode
<b:includable id='threaded_comments' var='post'>
7. Tambahkan kode dibawah setelah <b:includable id='threaded_comments' var='post'>
<b:include name='threaded_comment_css'/>
8. Save Template.

50 komentar

Baru tau jika ada masalah seperti itu, soalnya diblog duniapiyen langsung ditambah oleh pihak blogger...

Balas

Saya juga baru nemu kasus kayak gini, langsung obrak-abrik template :)

Balas

wah, penampilan baru nih kang? :D #baca template blog ;))

Balas

Berarti baru berkunjung lagi ya :) cari sedikit yang fresh lah..

Balas

gan, gimana cara ngilangin avatar/gambar buat si komentatornya? Ane pengen yg tampil cuma nama, tanggal, isi komen, replay, delete, tambah komen, tanpa harus ada gambar avatar/profile yg muncul.

Salam blogger kang, and nice post. I love it. :)

Balas

menuju Settings >> Comments >> Show profile images on comments? pilih no ;)

Balas

Sudah ada om nova yg jawab... :-bd

Balas

kang liat punya saya,,, saya berhasil...

Balas

kalo nambahin tulisan admin kayak punya Kang Ismet gimana ya??
pliiiiiss....

Balas

kenapa thread-nya hanya sedalam dua baris ya? nggak bisa seperti di WP yang bisa sampai berkali2 di reply

Balas

Lihat tutorial terbaru sob...

Balas

thanks bro ! bermanfaat bgt buat blog saya ! mksih ya mksih ya ? hehe seribu jempol deh (y)

follback blog sederhana saya ya om ? hehe
http://yossex6-32.blogspot.com :)
skali lagi mksih om !

Balas

Orang baru ni om, mo tanya.
Klo box css di perancang template fungsinya apa om?
Coz yg om kasi ini musti masuk ke edit html

Balas

Untuk meng-inject sedikit kode css, seperti judul menjadi hurup besar semua, atau yang lainnya.

Kalau benar2 edit, ya harus masuk ke Edit HTML, seperti pernyataan Google Support:

"Editing CSS allows you to change the look and feel of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, please use the Edit HTML field located in the Layouts tab. Also remember that, like other customizations, your CSS will be removed if you change designs"

Apalagi kode pada tutorial ini juga, tidak hanya CSS, tapi mengandung kode HTML.

Balas

kang punya saya ko ga bisa di save ya?

Balas

Pesan error nya ky gimana?

Balas

Iya kang, aq juga penasaran..
Tutorial dari sampeyan sudah saya praktekan dan berhasil 100%
Cuma satu yg blm bisa...Nambahin tulisan "admin" dengan kotak merah seperti punya sampeyan itu yg saya blm tau caranya..

Kasih tau donk kang...

Sekalian mampir2 juga ya ke blog ku...

Balas

Sepertinya punya saya tidak berhasil, namun pas edit html emang oke, cuma pas di review tidak berubah, soalnya sebelumnya treaded comment sudah bukan yang default terus mengatasinya gmn ya?

Balas

Hampir dua minggu ngutak-atik template hanya ngurusin komentar dan reply komentar, baru ketemu neh Tutorialnya. Mohon ijin ngebajak, sekalian deh sama postingannya biar enggak kabur tuh postingan(he..he..he..emangnya ayam apa kabur)

Balas

Padahal sudah dibolak-balik tuh css. Ternyata cuma enggak dipasang -nya. Haduh sampe tujuh turunan juga enggak akan berubah tuh komentar.

Balas

Udah clear can sekarang sob?

Balas

Banget kang..he3, Thnks

Balas

Mas saya sudah menerapkan cara dari mas untuk membuat tombol reply di blogger, termasuk untuk menambahkan kode css ini. Dan alhamdulillah semuanya berhasil namun ada satu yang janggal mas. Misal saya membuat komentar pada tanggal 29 Maret 2012, mengapa yang muncul di dalam komentar tanggal 28 Maret 2012 ya. Mohon pencerahannya apakah saya ada yang salah pada saat copy paste code atau bagaimana?

Terima kasih sebelumnya.

Balas

Kalau zona waktunya gimana sob? sudah pake GMT+7 (Jakarta)? kalau di blog saya tanggal ngga masalah, tapi kalau jam masih belum tepat dan belum menemukan solusi. Kalau sudah ketemu nanti saya share :)

Balas

Bukan masalah di jam mas untuk GMT+7 juga sudah saya gunakan dari dulu mas, melainkan di hari sebagai contoh artikel saya Tips Sukses Menjalankan Bisnis Online itu saya terbitkan tanggal 29 Maret 2012. Tapi yang pada koment itu tanggalnya tertera 28 Maret 2012.

Balas

Saya liat di forum2 memang ini masih menjadi bug untuk threaded comment.. mudah2an ada solusinya..

Balas

Berhasil gan thanks ya

Oy cara supaya button balasnya ke sebelah kanan gimana ya gan , mohon pencerahannya

Balas

berhasil gan. cuma koq ada yang aneh ya button reply sama delete kagak sejajar nih mohon pencerahan gan. thanks

Balas

makasih banyak gan buat infonya

Balas

Mkasih banget nih informasinya salam kenal gan....

Balas

Mkasih nih informasinya salam kenal gan...

Balas

Sangat berguna banget nih informasinya bisa langsung saya coba nih....

Balas

wihh,, mantabhh gan infonya nieehhh.. !!
kunjungi balik ya gan ..

Balas

Asekkk,, Tutorialnya manjur gan!!!
Makasih banyak ilmunya,, ;)

btw, mohon bantuan nich gan, about me saya ilang setelah ganti template,, udah saya coba otak-atik di template, tapi gak berhasil²,, knp ya gan?

skali lagi makasih banyak gan,, ;)

Balas

setelah saya coba otak-atik lagi, ternyata bisa gan aboutnya,,
thank u,, ;)

Balas

kalo muncul tulisan kaya gini " Widget dengan id "Blog2" mengandung sedikitnya dua elemen b:includable dengan id yang sama:"threaded_comment_css". Semua elemen b:includable sebaiknya memiliki id unik untuk widget yang diberikan."
kira" apanya sob??
ane tunggu kunjungan baliknya ya sob?? :)

Balas

kang, gimana cara buat komentar kayak blog ini?
krim tutorialnya ke andrepamungkas31@gmail.com
please...

Balas

Sudah di buat, coba kunjungi
http://blog.kangismet.net/2012/11/vinaluv-rulers-threaded-comments.html

Balas

Coba diulang lagi, sebelumnya backup dulu templatenya

Balas

om.. blognya juita gk berubah2 yah?? ada yg salah kali yah??tapi gmana yah.. dr semua tutorial editing blog HTML bru barapa yg berhasil.. hmm... susah..
:'(

Balas

Mas, untuk tombol "Hapus" nya ko keliatan ya sama pengunjung. Coba liat deh di sini, Hamba Mohon Ridho-Mu. tolong jawabannya ya di website saya. trims

Balas

silahkan copy paste link di bawah ini ke browser untuk mengunjungi :
http://blog.kangismet.net/2013/03/mengatasi-tombol-hapus-yang-terlihat-pengunjung.html

Balas

terima kang ismet , setelah diterapkan sukses :)

Balas

Gimana cara menambahkan hari dan tanggal di bawah postingan di beranda ? Di situ hanya ada jam dan jumlah komentar. Mohon jawabannya ya kang.

Balas

Poskan Komentar


×
Chat