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? :)

  • Taufik Nurrohman

    @Jasri DM Bisa, tapi terbatas untuk latar formulirnya saja, sedangkan elemen-elemen seperti textarea dan button tidak bisa diubah tampilannya:

    #threaded-comment-form {
    /* Tralalaaa... */
    }

  • 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

  • Putra

    @Bayu Handono setuju bang!! :-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 Di sini Saya tidak mengajarkan cara membuat blog DTE :] mas... =D

  • Muhammad Irham

    @Taufik Nurrohman owh, kalo style komentar? :D ^_^

  • 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

  • asihnaim.blogspot.com

    mas... uda sy coba di blog saya kok ga bisa ya...
    asihnaim.blogspot.com

  • 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

  • xtkj1

    :)

  • 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.