Edit CSS Thread Comments Blogger atau Merubah Tampilan Komentar Baru di Blogger, banyak rekan-rekan blogger yang bertanya tentang cara ini.

Pada tutorial sebelumnya, saya sudah menjelaskan Cara Membuat Thread Comment Blogger seperti Wordpress. Ketika kita merubah kepada fitur baru ini, tampilannya masih sederhana dan kurang professional.

Tampilan sebelum diedit:

blogger threaded comments

Setelah diedit:

blogger threaded comments

Untuk mengganti tampilan seperti pada blog saya, silahkan ikuti langkah-langkahnya.

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Silahkan Backup dulu template anda ---> Download Template Lengkap
3. Cari kode dibawah ini (untuk memudahkan gunakan Ctrl+F):
Kode:
<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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;      
}      
.comments .thread-collapsed .thread-arrow {      
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/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>

4. Ganti kode dengan ini:
Kode:
<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>

5. Simpan dan Selesai.

Apabila tidak cocok dengan template Anda, silahkan edit CSS sesuka Anda. Semoga tutorial Edit CSS Thread Comments Blogger ini berguna bagi anda.

Bagi anda yang tidak menemukan Kode CSS Threaded Comments pada template, silahkan kunjungi artikel tentang Cara Menambahkan Kode CSS Threaded Comment

Special thank to Ravie Saive for a CSS code.

66 komentar

Thanks Kang Ismet for posting my article here..

Balas

Thanks for visiting my blog Ravie.. and keep sharing :)

Balas

kalau saya jadinya hancur bang, soalnya dah banyak yang berubah dari kode dasar templatenya :)

Balas

berhasil-berhasil horeee, hatur nuhun css.na hahah

Balas

sami2 kang... naon macana lieur.. :)

Balas

udah berhasil sih kang, cuman kalo mau ganti warna background di komentar balasan caranya mesti gimana/apa yg diganti?

Balas

Cari kode ini :

.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;

warna background (EBF5FE) ganti, untuk panduan warna Hexadecimal (baca: Web Color Hexadecimal)

Balas

siippp kang,, berhasil,,

trims..^^

Balas

mau tanya kang
kenapa editan css di blogku kok gak ngaruh alias gak terjadi apa pun perubahan sedangkan sebelumnya berhasil

mohon bantuannya :D

Balas

coba cek lagi CSS nya, liat di source code g ketemu :)

Balas

dicari berkali2 ternyata di templateku gak ada css threaded komennya,,
jadi gimana cara edit cssnya ?

Balas

Karena tidak ada css nya,,

jadi aku coba2 langsung masukim ke menu template designer cssnya,, kayak http://support.google.com/blogger/bin/answer.py?hl=en&answer=175740
eh berhasill<

makasih

Balas

kalo liat di source code memang gak ada .... tapi udah dimasukkan sebagaimana adanya... maksudnya dalem template ku ada tapi gak ke load sepertnya ]
kenapa ya???? :(

Balas

Terima kasih sahahabat atas berbagi tipsnya ini.Alhamdulillah berhasil

Balas

kang ismet, saya kok tidak ada kode - ?

mohon penjelasannya

Balas

dr tadi nyari css ga ketemu, ngikutin komentar Gaptek ternyata berhasil juga. Terima kasih

Balas

gan kok punya ane gak ada css nya yoo??
mau diganti gmn lagi??

Balas

ikutan berhasil guaa akhirnya.. :D
yes yess.. thanks kakak.. :)

Balas

lihat ke atas gan... artikel sudah diupdate :)

Balas

info bagus gan, thx

salam kenal
www.adib21.com

Balas

Sama2 gan... salam kenal juga, sering berkunjung ya... :)

Balas

Rumus ini enggak mempan di Template abdi, kang Ismet. Naha-nya?

Balas
Komentar ini telah dihapus oleh pengarang.

da berhasil kang... trim's y...jgn lupa berkunjung di blog ane...http://baycinema.blogspot.com/

Balas

thanks gan....yg ini juga berhasil di blogku :2thumbup

Balas

di tempat q ngk mau bekerja kang,,,, hhohohooo,,,,
ada apa dengan template q

Balas

klo aku mau ikut bkin kek gtu, yg dipasang code nomor berapa?

Balas

mantab kang,,tapi kok gak sesuai dengan template saya ya?? template saya dark..

tolong editin ya kang ismet..pkonya gmna baiknya aja

Balas

kapan2 sayabuat untuk dark theme :)

Balas

salam kenal kang.

kang Ismet... posting ini bener2 bikin saya ngiler iri kang dan sangat memotifasi saya untuk ikut mengembalikan koment ke default juga... (awalnya hilang gara2 mengganti tamplet) hehe...

cz. waktu itu saya juga iri ama word presss....
berhubunga saya lupa scriptnya jadi saya obok2 ampe 5 jam baru bisa pulih lagi...

Terimakasih yahh kang... wat infonya... dan... kalau berkenan bisa mampir ke blog saya ( http://candrajunie.blogspot.com ) untuk melihat script css kang Ismet yang sudah terpasang dengan baik.

Balas

terimakasih ya kang ismet, ini sungguh membatu saya..
saya baru pertama ngeblog kang.. salam kenal

Balas

mas, mautanya. Cara buat style komentarnya kayak blog yang ini gmn. Yang comment_body nya dibawah comment_header.. terlihat enak soalnya :)

Balas

kang, aduh maaf bgt tanya2 lg, pdhl dulu udh oke..
tp ini ga tw knapa, koq tampilan threaded comment ny balik lg kya sbelum di edit pke cara di atas.. klo ga salah, berubahnya pas abis compress css..
emg compress css bisa ngaruh ya kang?

Balas

Oh iya satu lagi kang, klo cara pengaturan form Kotak komentar biar bisa digeser agak ke sebelah kanan caranya gimana?
Soalnya punya saya tampilan komentar sama form kotak komentar di bawahnya ga rapi, tampilannya bisa dilihat di link saya ini..

Balas

kang mw nanya nih,
kalau mw membenarkan tanggal pd komentar gmna ya.?
misal.nya saya brkomentar pd tgl 20 oktober, tp jd.nya tgl 19 oktober kang, mohon bantuan nya kang,??
udh cari kmna" blum ktemu T__T

Balas

Masuk ke Setelan > Bahasa dan pemformatan > Zona waktu > Pilih GMT + 7 (Jakarta)

Balas

makasih kang, trnyata pengaturan di situ >_< #maklum msh baru di dunia blogger

mw nanya lg nih kang, tp OOT sih #moga" gkpp ya :)
saya kan coba cek blog sya di chkme.com trus ada pesan kya gni. warning : "Pastikan Anda memiliki setidaknya satu tag H1: Ini mewakili judul konten Anda / website."

itu knp ya kang.? apa krna template yg sya gunakan tidak ada h1 nya.? trus cara memberikan h1 itu gmn kang.?
#maaf bnyak nanya kang :)

Balas

terimakasih atas pertanyaanya, sehingga menjadi inspirasi postingan buat saya, untuk solusinya silahkan kunjungi http://blog.kangismet.net/2012/10/mengatasi-h1-zero-that-is-really-bad-di-chekme-com.html

Balas

kang, gimana cara buat thread komen kayak blog kang ismet

Balas

iya gimana caranya buat komentar kaya di blog ene.. :D

Balas

untuk kode <b:includable id='threaded_comment_css'> gak ada tuh di template saya.. gimana solusinya bang ?

Balas

berarti masih sistem komentar lama, kalau mau pake thread comment kunjungi aja :

http://blog.kangismet.net/2012/01/cara-membuat-threaded-coment-di-blogger.html

Balas

Met siang, Kang Ismet.

Haduh, saya sudah coba masukkan kode di atas yang "threaded_comment_css" itu tapi tetap tidak berfungsi.

Di template saya malah ada kode di bawah ini:

------- kode ini padahal sudah sempat saya hapus, kemudian digantikan dengan kode dari Kang Ismet yang 'underscore css' tadi, tapi setelah di-save tetap tidak berhasil.

Apanya ya Kang?
Mohon bantuannya, Kang.

Makasih sebelumnya..
~Dany (http://joy-dedicated.blogspot.com)
:)

Balas

Kode ini maksudnya, Kang:
b:includable id='threaded_comment_js' var='post'

Balas

Cara merubah warnanya gimana kang? :)
[img]http://3.bp.blogspot.com/-Hwp6ZD8R3yo/UbgcJr0xPoI/AAAAAAAAAZI/txh28O5C1q0/s1600/tanya.jpg[/img]

Balas

cari kode seperti ini :
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;
}

ganti warna backgroundnya

Balas
Komentar ini telah dihapus oleh pengarang.

Kang, setelah saya coba berhasil. Tetapi ada nomor urut komentar nya yang membuat saya kurang nyaman melihat.
Berikut ini gambar nya : [img]http://img198.imageshack.us/img198/7006/inh.png[/img]

Balas

Kang, saya udah coba CSS Thread comment kang ismet, tapi tetap aja selalu ada nomor urutnya.. cara ilanginnya gimana ya ? Blog saya :4-jie .blogspot.com

Penampakan : [img]http://i.imgur.com/MUW5sO9.png[/img]

mohon bantuannya kang pleaseee

Balas

nanti saya liat duu penyakitnya sob...

Balas

Untuk kesekian ribu juta puluh ratus ribu kalinya blogku diselamatkan Kang Ismet, makasih lagi yo Kanggg.... ^^

Balas

wkwkkw postingannya aja baru 300an :-d

Balas
Komentar ini telah dihapus oleh pengarang.

bagaimana kang kalau kita ingin menghilangkan tombol replies/balasan, dan mensejajarkan tombol balas dengan tombol hapus pada kolom balasan komen, maksud saya biar tidak berantakan.. kan kelihatannya rapi kalo kaya punya si akang ismet

Balas

Poskan Komentar


×
Chat