Mecha versi 2.6.4 sudah dirilis!

CSS Komentar Blogspot · Tema Facebook

CSS Komentar Blogspot - Tema Facebook

Masuk ke halaman Editor HTML Template Anda lalu temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya:

/*!
 * CSS Komentar Blogspot - Tema Facebook
 * Selengkapnya: https://plus.google.com/108949996304093815163/posts
 */

.comments {
  font:normal normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  color:rgb(51,51,51);
}

.comments .comments-content a {color:#3B5998 !important}

.comments h2,
.comments h3,
.comments h4 {
  font-family:inherit !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0;
  padding:10px;
  border-top:1px solid #e9e9e9;
  border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
  margin:0;
  padding:0;
  border:none;
  background:none;
}

.comments .comment .comment-header {margin-bottom:4px}
.comments .comment .comment-header .datetime a {color:#808080 !important}
.comments .comment .comment-actions a {padding-right:5px}

.comments .thread-toggle .thread-arrow {
  width:7px;
  height:7px;
  padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  float:none;
  display:block;
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {margin:0 0 0 60px !important}
.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px}
.comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
  width:32px;
  height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {margin:0 0 0 40px !important}
.comments .comment .comment-content {text-align:left}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
}

.comments .comment .comment-thread.inline-thread .comment:last-child {border-left:2px solid #A8B2CE !important}

Klik Simpan Template dan lihat hasilnya:

Lihat Demo

44 Komentar

Bayu Handono

saya terapin yah mas :)
kayaknya hampir semua postingan mas taufik saya terapin di blog saya :p

abang ichal

ooooo ternyata thread yaa...
sy kira yg smcam FB koment dan like

Lentera Langit

sy sdh coba tp ko gk bs ya.., ini linkx sob :

http://eks-templateq.blogspot.com/2012/04/berlaku-jujur.html

Taufik Nurrohman

@Lentera Langit Ini kode CSS khusus untuk template blogspot dengan fitur thread-commenting yang aktif. Aktifkan dulu fitur komentar bersarang baru Blogger agar CSS ini bisa bekerja.

Anonim

Boleh saya coba dah, thx infonya y

Unknown

wah.
ini dia yang saya cari-cari ^_^

Unknown

keren bener agan O.o #terpukau waw

Unknown

apakah bisa form komentnya kita kasai background seperti disqus mas? :)

Unknown

mas taufik untuk memunculkan form komentar itu gimana...karena form komentar dan komentar yang di template lama ga bisa muncul...

Taufik Nurrohman

@Ayi Moo Masuk ke menu Setelan ⇒ Pos dan Komentar
Pada seksi Komentar cari opsi lokasi komentar lalu pilih Tersemat.

Unknown

@Taufik Nurrohman udah kok...tapi gak muncul...coba buka blogq ini...ini cloiningan blogger tune up punya mas hendriono...

http://ayimoo88.blogspot.com/2012/04/xus-pclock-v3361-aplikasi-untuk.html

Taufik Nurrohman

@Ayi Moo Di mana-mana yang namanya template kloning ya begitu mas :) Nggak mungkin bisa sama persis dengan aslinya, soalnya cara kerja mesin kloning memang cuma mencetak hasil tampilan di layar. Kode template di dalam dengan kode template di luar itu berbeda jauh. Jadi jelas ini masalahnya ada di dalam template (elemen formulir komentarnya tidak ada) <=)

Putra

@Taufik Nurrohman ngloning modification blog, blognya kang Dede kan? ckck. itu dia DOsa kau, tak ijin duluu hahackck :D

Unknown

jadi gimana kalau masalah gtu mas taufik untuk memunculkan form komentarnya...karena form komentarnya pakai sliding panel

Unknown

dah ijin kok........q dah ijin 3 hari yang lalu sobat

Bayu Handono

mending kaya saya mas bikin blog dari awal, saya coba terapin ilmu yg ada di sini, lancar2 aja tuh. ckckck :D

Unknown

owww gtu yah sobat q dah punya kok.....owww iya q dah cloning ampe 7 blog,,,,cuman iseng doank

Unknown

sebenarnya yang saya maksudkan mengubah background text area nya, tapi udah di jawab tu

Anonim

Manrapppss langsung di praktekin dann sukesss makasiiii

Muhammad Irham

Desain komentar mas taufik disini dishare ngak?, yang dipakai ini

Taufik Nurrohman

@Muhammad Irham Hmmmhhh... =p* Lebih baik diam-diam cari tahu sendiri di dalam blog ini, lalu bagi-bagi hasil penemuannya kalau sudah tahu. Kebanyakan orang yang berhasil menerapkan tampilan CSS yang mirip dengan blog ini lebih suka mencuri dibandingkan meminta.

Muhammad Irham

@Taufik Nurrohman hehe saya sukanya yang legal mas

ini cssnya bukan?
#comments {
padding:20px 30px 30px;
margin:0 2%;
background-color:#2f2f2f;
border:2px solid #666;
box-shadow:inset 0 0 7px black;
color:white;
}

.......

#comments h4 strong {
font-size:110%;
}

Unknown

its is work
thanks

Unknown

Hore..Saya sudah Pakek Masss !!

Unknown

intip scriptnya ah :D heheheh , mana tahu bisa bikin komentar gaya dte :]

Lentera Langit

Pak Taufiq terima kasih CSSnya.., mau nanya, gmn carax agar saat link para komentator diklik langsung terbuka pd Tab baru, terima kasih atas solusinya :)

Taufik Nurrohman

Pakai JQuery. Kalau cara manual tidak bisa untuk fitur komentar yang sekarang. Taruh kode ini di atas </body>:

<script>
$('.comments .comment-header a').attr('target', '_blank');
</script>

Lentera Langit

saya sdh coba pak tp tetap gk bs.., kenapa ya?? :D

Lentera Langit

sy nunggu solusinya pak.., terima kasih... :D

Unknown

mas di komentar blogger bisa dikasih fasilitas like ga mas?

azewBz

kalau ini ga ada tombol buat delete kan mas?
cuman admin doang yg bisa pke tombol delete.

Unknown

wah mas taufik emang master coding tingkat dewa..

azewBz

mas klau ngerubah(Add comment)pada komentar tutorialnya dimna?
contoh:

nah tampilanya pngen sperti itu..!!
kan kalu punya mas saat di reply ada tulisan (batal)

Oqif

kalau yang di blog saya udah seperti itu ya ?
http://ilmumum.blogspot.com

saya minta saran tentang blog ini.
terimakasih banyak

ANANTA

DTE memang mantap :-bd \o/ , semua postingannya dibutuhkan oleh pengedit template . tetaplah berkarya .salam. :)

Komentar telah ditutup.