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!
SHARE Pin Share
Artikel Terkait
104 komentar
  1. Tapi fitur pratinjau komentarnya jadi hilang yha mba :\

    BalasHapus
    Balasan
    1. Iya mas komentar baru ini gak ada fitur pratinjaunya.

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

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

      Hapus
    4. saya eror ya mbak, saya pake viomagz v.2.7

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

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

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

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

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

    BalasHapus
    Balasan
    1. Kok bisa gak ada. Pake template apa?

      Hapus
    2. viennalite2 mba dari idntheme.

      Hapus
    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'/>

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

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

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

      Hapus
    2. @Robin situ salah masang kodenya, seharusnya masangnya di atas kode */]]>
      bukan di bawahnya.

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

    BalasHapus
    Balasan
    1. sama. mohon bantuan mbak

      Hapus
    2. Tulis pesan error secara lengkap ya biar tau kode yang bikin errornya apa.

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

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

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

    BalasHapus
    Balasan
    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"/>

      Hapus
    2. Udah tak coba mba. Tak hapus tapi masih muncul peringatan invalid itu. Kenapa ya. Mohon bantuan mbak

      Hapus
    3. Berarti masih ada kode yang double. Dihapus aja kodenya sssuai dengan pesan error.

      Hapus
  10. di blog saya g terjadi perubahan ka

    BalasHapus
  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 ??

    BalasHapus
    Balasan
    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"/>

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

    BalasHapus
  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?

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

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

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

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

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

      Hapus
  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

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

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

    BalasHapus
  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?

    BalasHapus
    Balasan
    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"/>

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

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

    BalasHapus
    Balasan
    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

      Hapus
  22. Mba kok eror ya pas di save. Tulisannya kayak ini
    Invalid variable declaration in page skin: Variable is used but not defined. Input: tabs.overflow.selected.color

    BalasHapus
    Balasan
    1. Variabel tabs.overflow.selected.color belum tertulis. Pastikan salin semua kode yang ada di tutorial.

      Hapus
  23. Mantap gan laman website nya. Bagus

    BalasHapus
  24. Klo pake template yg gak pake variabel gimana sist ?

    BalasHapus

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

    BalasHapus
    Balasan
    1. Itu udah jelas pesan errornya. Kalo masih belum paham baca komentar-komentar di atas.

      Hapus
  26. Di blog saya work mba, tapi kok di samping profil orang yang komen, kok ada nomornya-nomornya gitu mba, gimana ngilangin nomornya mba

    BalasHapus
    Balasan
    1. Itu karena CSS. Tambahin ini.
      #comments ol, #comments ol li{
      list-style:none;
      list-style-type:none;
      }

      Hapus
  27. Error kak gatau dimana nya

    BalasHapus
  28. disaya gak ada data:post.commentFormIframeSrc link andromaxdewadewi.blogspot.com

    BalasHapus
  29. Mbak.. Di saya muncul error seperti ini Kami tidak dapat menyimpan tema Anda.
    Tema Anda tidak dapat diurai karena tidak diformat dengan baik. Pastikan semua elemen XML ditutup dengan benar. Pesan error XML:
    Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.font

    Kira² cara memperbaikinya gimana ya?

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

    BalasHapus
    Balasan
    1. Baca komentar-komentar sebelumnya buat cari solusinya.

      Hapus
    2. Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color

      Hapus
    3. BACA komentar-komentar sebelumnya buat cari solusinya.

      Hapus
    4. kepingin form komentar kaya seperti blog ini..., milik saya bagus sih.. suman kurang nyaman aja kenapa setiap reply komentar hasilnya form komentarx mengecil.

      tidak seperti blog ini tetap rata menggantung...

      mengharap sekali ada tutorialnya ... salam

      Hapus
  31. Makasih Mbak Igniel WORK!!!
    Untuk hasilnya silahkan kunjungi blog Saya : https://www.topgadgetid.online

    BalasHapus
  32. mbak niel, aku mau balikin dari komentar disqus ke komentar seperti di blog ini, tpi pada langkah (data:post.commentFormIframeSrc appendParams {skin: "contempo"}) diatas koq ga ketemu iya mbak, apakah sudah dihapus yg buat template. trimakaasih untuk tanggapannya mbak

    BalasHapus
  33. solusinya kak

    Invalid variable declaration in page skin: This is not a valid type for a variable. Input:

    BalasHapus
  34. kok saya nggak work ya mbak ? Mohon Pencerahanya

    BalasHapus
  35. terima kasih banyak mbak.

    BalasHapus
  36. mb ini gmana y, aq coba kx muncul notifikasi "Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background"

    BalasHapus
  37. Saya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~

    BalasHapus
  38. Saya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~

    BalasHapus
  39. Saya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~

    BalasHapus
  40. Its work mba igniel thanks infonya, btw boleh saya bantu share artikelnya di blog saya mba?

    BalasHapus
    Balasan
    1. Silakan mas. Cantumkan sumbernya ya.

      Hapus
    2. Pasti mba https://myzozieman.blogspot.com/2019/08/cara-mengganti-kotak-komentar-dengan.html?m=1

      Hapus
  41. Siip Mbak, siap eksekusi blog nih, moga work^_^

    BalasHapus
  42. Mba, di blogku ngga berhasil mulu.

    BalasHapus
  43. Artikelnya menarik dan bagus bermanfaat sekali jangan lupa kunjungi balik guna.site

    BalasHapus
  44. Berhasil mba, dan ternyata ada triknya biar ga error.

    BalasHapus
  45. Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed .................

    Muncul begitu teh igniel

    BalasHapus
  46. kk bantu donk kode data:post.commentFormIframeSrc g ada di template blogkku Revoltify Premium dari arlina design

    BalasHapus
  47. Saya suka template yg kmu pake mba

    BalasHapus
  48. 'Invalid variable declaration in page skin: Variable is used but not defined. Input: label.border.color'

    ada error begitu?? kenapa ya . . .

    BalasHapus
  49. Pada template emporio tulisan "enter your comment" tertutup oleh "comment as:". Ada solusinya?

    BalasHapus
  50. kenapa tak mau tampil di blog sy ya?
    http://bloggerhanasangkala.blogspot.com

    sy menggunakan templates gridify

    BalasHapus
  51. <php echo'IGNIEL.COM Blog Favoritku';?>

    BalasHapus
  52. saya mau pake ini gimana ya kak?
    < a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> kode ini ga ada? kebetulan saya pake infinite mbak arlina bawaanya udah disqus tapi nau saya balikan pake blogger

    BalasHapus
  53. wih, makasih gan, tadinya abis pake template custom, embedded comment nya jadi error (tulisannya: whoops, that' an error), habis dimasukin kode ini balik lagi normal, sekarang tinggal ngotak atik theme nya hehe

    BalasHapus
  54. untuk blogger v3 gimana kak? saya udah coba menerapkan di blogger v3, gak work

    BalasHapus
  55. mbak igniel kog ditempat saya g ada data:post.commentFormIframeSrc appendParams {skin: "contempo"}
    pake template mediumish
    https://www.wahyudimana.co

    mohon di cek dan dibantu mbak igniel

    BalasHapus
  56. Hi, kenapa di template yang saya pakai tidak ada "data:post.commentFormIframeSrc" ya ? Saya pakai template Digizena Responsive Blogger dari idtheme

    terimakasih

    BalasHapus
  57. Invalid variable declaration in page skin: Variable is used but not defined. Input: fff

    what this ? keterangan cuma fff mksdnya error dmna ya mbak ?

    BalasHapus

Posting Komentar