Cara Mengganti Tampilan Komentar Blogger ke Versi Terbaru

Cara Memasang Widget Kotak Komentar Contempo Terbaru di Blogger

Ketika Blogger mengeluarkan template baru versi 3, ada satu hal yang cukup menyita perhatian banyak orang, yaitu tampilan komentarnya yang berubah. Versi baru ini lebih minimalis dan terkesan modern. Banyak sekali yang ingin mencoba kotak komentar bawaan Blogger versi baru tapi tersandung masalah besar: harus ganti template. Ini karena formulir komentar tersebut hanya tersedia di template v3 terbaru seperti Contempo, Soho, Emporio, dan Notable.

Jangan khawatir! Karena tutorial kali ini akan menjelaskan cara memasang kotak komentar bawaan Blogger versi baru tanpa harus ganti template secara keseluruhan.


Cara Mengubah Komentar Blogspot Menjadi Versi Baru

1. Cari kode <b:skin><![CDATA[ dan simpan kode berikut tepat "SESUDAH / DI BAWAHNYA".
<!-- Variable definitions -->
<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="#008c5f" value="#008c5f"/>
</Group>
Value #008c5f dalam body.link.color adalah warna dari link di dalam kotak komentar. Ganti value-nya sesuai dengan warna template kamu.

2. Cari data:post.commentFormIframeSrc yang jumlahnya lebih dari satu. Pilih SEMUANYA dan GANTI dengan kode komentar Blogger yang baru berikut:
data:post.commentFormIframeSrc appendParams {skin: "contempo"}

Kode lengkapnya seperti ini:
<!-- Sebelum -->
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<!-- Sesudah -->
<a expr:href='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' id='comment-editor-src'/>


3. Jangan lupa simpan pengaturan dengan klik tombol Save theme.

Cek tampilan blog kamu dan lihat hasilnya. Cuma sedikit kan pengaturannya? Iya, karena cara mengubah tampilan comment form Blogger menjadi versi baru ini memang gampang banget buat dipraktekan. Bisa bikin tampilan makin keren dan tidak ketinggalan jaman. Masa masih pakai versi lama sih, kan kurang asik.

Kalau gagal silakan komen dibawah karena kode setiap template mungkin tidak sama. Semangat mencoba!
Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

44 Komentar

  1. Tapi fitur pratinjau komentarnya jadi hilang yha mba :\

    ReplyDelete
    Replies
    1. Iya mas komentar baru ini gak ada fitur pratinjaunya.

      Delete
    2. apa enggak memperlambat loading, bu http://www.thetaindomaga.com

      Delete
    3. Gak pak. Sama aja kaya versi lama.

      Delete
  2. disaya banyak kode ini nya : data:post.commentFormIframeSrc appendParams {skin: "contempo"}

    ReplyDelete
    Replies
    1. Memang banyak. Gak cuma 1. Kalo udah ada jangan diganti lagi. Tinggal tambahin aja kode pertama yang dibawah b/:skin

      Delete
  3. Saya pernah coba dulu, terus fitur balas komentar yg balasan nya agak menjorok ke dalam malah jadi gak work, jadinya saya copot. :D

    ReplyDelete
    Replies
    1. Secara default, posisi balasan komentar akan menjorok ke dalam. Kalau hasilnya jadi sejajar mungkin ada pengaruh dari CSS sebelumnya.

      Delete
  4. Mba untuk template yg gak ada data:post.commentFormIframeSrc gimana ya kira"?

    ReplyDelete
    Replies
    1. Kok bisa gak ada. Pake template apa?

      Delete
    2. viennalite2 mba dari idntheme.

      Delete
    3. CARI (saya cek ada 8, ganti semuanya):
      <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      GANTI KE:
      <a expr:href='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' id='comment-editor-src' title='comment editor'/>

      Delete
    4. Thanks mba, sudah saya coba dan work.

      Delete
  5. udah di coba mbak ... cuma error, dikolom komentar nya itu ada logo blogger terbelah dan tulisan "ups ada yang salah". gmna ya mbak?

    ReplyDelete
    Replies
    1. Kalo kaya gitu biasanya ada kode yang gak sengaja kehapus. Diulang lagi dari awal dengan hati-hati.

      Delete
  6. Waktu di terapin error nya begini terus "Invalid variable declaration in page skin: Variable is used but not defined." Kenapa ya mba?

    ReplyDelete
  7. Untuk artikel baru yang belum ada commentnya, berhasil. Tapi artikel yang sebelumnya sudah ada comment, masih terlihat versi lamanya mbak

    ReplyDelete
  8. "Ups, tampaknya ada yang salah." gimana ya mba? please help. di template viomagz udah aada beberapa variable yang sama. gak jadi.

    ReplyDelete
  9. Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background

    ReplyDelete
    Replies
    1. Variable body.background udah ada (bawaan template sebelumnya). Tinggal dihapus aja baris yang ini:
      <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>

      Delete
  10. di blog saya g terjadi perubahan ka

    ReplyDelete
  11. mba kok pas di save error

    Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.font


    cara atasinya gimana ??

    ReplyDelete
    Replies
    1. Variable body.font udah ada (bawaan template sebelumnya). Tinggal dihapus aja baris yang ini:
      <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>

      Delete
  12. Gagal kak :)
    trims artikelnya, masih mencari solusi

    ReplyDelete
  13. Terima kasih ilmunya, berhasil!

    Agak OOT sih ini, cuma kalau mau nambahin tanda admin/author di samping nama kita di kolom komentar itu gimana ya caranya?

    ReplyDelete
    Replies
    1. Disini:
      https://www.igniel.com/2018/12/tanda-admin-komentar-blogger.html

      Delete
    2. Sudah saya coba sesui tutorial, tapi masih belum muncul mba...

      Delete
  14. WHAAAAAAA!!!!! terima kasih Admin. LOB u

    ReplyDelete
  15. Kak, yang saya kok gak ada commentFormIframeSrc ya? Jadi badmood liat tampilan blog karena pake komentar versi dulu , pliss kasi solusi kak igniel

    ReplyDelete
    Replies
    1. Cek komentar sebelumnya.
      https://www.igniel.com/2018/09/komentar-baru-blogger.html?showComment=1540227803839#c6824956396445055818

      Delete
  16. wah keren berhasil, tapi sayangnya harus di scroll lagi biar nanti muncul tombol publish dan notify me nya..
    cara biar gak usah scroll lagi tapi langsung muncul tombol publish nya gimana ya kak? seperti kolom komentarnya kakak

    ReplyDelete
  17. Mba kalo template aku gada kolom komen blogger adany kolom komen facebook gimana y mba

    ReplyDelete
  18. Btw klo jadiin kya kolom ini gimana mba?

    ReplyDelete
  19. error dibagian kedua, lebih tepatnya begini:
    Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background

    ohh iya, bentuk semulanya gini:
    < a expr:href='data:post.commentFormIframeSrc + "&skin=contempo"' id='comment-editor-src'/>

    trus saya ganti jadi:
    < a expr:href='data:post.commentFormIframeSrc appendParams {skin: "contempo"} + "&skin=contempo"' id='comment-editor-src'/>

    salahnya dimana ya mbak?

    ReplyDelete
    Replies
    1. Sesuai keterangan error, salahnya sudah jelas dimana.

      Variable body.background dideklarasikan 2 kali karena sebelumnya udah ada (mungkin bawaan template).

      Tinggal halus bagian ini.
      <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>

      Delete
  20. saya pake safelink kalau pakai replay/balas masuk ke safelink biar tidak masuk ke safelink , link untuk comment replay blok seperti apa mbak ?

    ReplyDelete
    Replies
    1. Maksudnya gimana? Kurang paham.

      Delete
  21. mba nama templatenya apa ? beli di mana?

    ReplyDelete
    Replies
    1. Bikin sendiri. Nggak ada namanya.

      Kalo mau beli yang mirip template ini, namanya Igniplex.
      https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>