
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!
Tapi fitur pratinjau komentarnya jadi hilang yha mba :\
BalasHapusIya mas komentar baru ini gak ada fitur pratinjaunya.
Hapusapa enggak memperlambat loading, bu http://www.thetaindomaga.com
HapusGak pak. Sama aja kaya versi lama.
Hapussaya eror ya mbak, saya pake viomagz v.2.7
Hapussaya ga berhasil udah ngikutin langkahnya
Hapusketnya gini error kenapa ya ?
com.google.blogger.b2.layouts.framework.skin.InvalidVariableException: Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background
disaya banyak kode ini nya : data:post.commentFormIframeSrc appendParams {skin: "contempo"}
BalasHapusMemang banyak. Gak cuma 1. Kalo udah ada jangan diganti lagi. Tinggal tambahin aja kode pertama yang dibawah b/:skin
HapusSaya pernah coba dulu, terus fitur balas komentar yg balasan nya agak menjorok ke dalam malah jadi gak work, jadinya saya copot. :D
BalasHapusSecara default, posisi balasan komentar akan menjorok ke dalam. Kalau hasilnya jadi sejajar mungkin ada pengaruh dari CSS sebelumnya.
HapusSya masih pakai versi lama biar antik fitur komen jadul blogger di blog sya..
HapusKeren gan
BalasHapusMba untuk template yg gak ada data:post.commentFormIframeSrc gimana ya kira"?
BalasHapusKok bisa gak ada. Pake template apa?
Hapusviennalite2 mba dari idntheme.
HapusCARI (saya cek ada 8, ganti semuanya):
Hapus<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&pageID=" + 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'/>
Thanks mba, sudah saya coba dan work.
Hapusudah di coba mbak ... cuma error, dikolom komentar nya itu ada logo blogger terbelah dan tulisan "ups ada yang salah". gmna ya mbak?
BalasHapusMbak?
HapusKalo kaya gitu biasanya ada kode yang gak sengaja kehapus. Diulang lagi dari awal dengan hati-hati.
Hapus@Robin situ salah masang kodenya, seharusnya masangnya di atas kode */]]>
Hapusbukan di bawahnya.
Waktu di terapin error nya begini terus "Invalid variable declaration in page skin: Variable is used but not defined." Kenapa ya mba?
BalasHapusSama. Mohon bantuan
Hapussama. mohon bantuan mbak
HapusTulis pesan error secara lengkap ya biar tau kode yang bikin errornya apa.
HapusUntuk artikel baru yang belum ada commentnya, berhasil. Tapi artikel yang sebelumnya sudah ada comment, masih terlihat versi lamanya mbak
BalasHapus"Ups, tampaknya ada yang salah." gimana ya mba? please help. di template viomagz udah aada beberapa variable yang sama. gak jadi.
BalasHapusfixed.
HapusInvalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background
BalasHapusVariable body.background udah ada (bawaan template sebelumnya). Tinggal dihapus aja baris yang ini:
Hapus<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"/>
Makasih mba
HapusUdah tak coba mba. Tak hapus tapi masih muncul peringatan invalid itu. Kenapa ya. Mohon bantuan mbak
HapusBerarti masih ada kode yang double. Dihapus aja kodenya sssuai dengan pesan error.
Hapusdi blog saya g terjadi perubahan ka
BalasHapusmba kok pas di save error
BalasHapusInvalid variable declaration in page skin: Variable name must not be declared twice. Input: body.font
cara atasinya gimana ??
Variable body.font udah ada (bawaan template sebelumnya). Tinggal dihapus aja baris yang ini:
Hapus<Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
Gagal kak :)
BalasHapustrims artikelnya, masih mencari solusi
Terima kasih ilmunya, berhasil!
BalasHapusAgak OOT sih ini, cuma kalau mau nambahin tanda admin/author di samping nama kita di kolom komentar itu gimana ya caranya?
Disini:
Hapushttps://www.igniel.com/2018/12/tanda-admin-komentar-blogger.html
Sudah saya coba sesui tutorial, tapi masih belum muncul mba...
HapusWHAAAAAAA!!!!! terima kasih Admin. LOB u
BalasHapusKak, yang saya kok gak ada commentFormIframeSrc ya? Jadi badmood liat tampilan blog karena pake komentar versi dulu , pliss kasi solusi kak igniel
BalasHapusCek komentar sebelumnya.
Hapushttps://www.igniel.com/2018/09/komentar-baru-blogger.html?showComment=1540227803839#c6824956396445055818
wah keren berhasil, tapi sayangnya harus di scroll lagi biar nanti muncul tombol publish dan notify me nya..
BalasHapuscara biar gak usah scroll lagi tapi langsung muncul tombol publish nya gimana ya kak? seperti kolom komentarnya kakak
Mba kalo template aku gada kolom komen blogger adany kolom komen facebook gimana y mba
BalasHapusBtw klo jadiin kya kolom ini gimana mba?
BalasHapuserror dibagian kedua, lebih tepatnya begini:
BalasHapusInvalid 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?
Sesuai keterangan error, salahnya sudah jelas dimana.
HapusVariable 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"/>
Terimakasih Mbak
BalasHapussaya pake safelink kalau pakai replay/balas masuk ke safelink biar tidak masuk ke safelink , link untuk comment replay blok seperti apa mbak ?
BalasHapusMaksudnya gimana? Kurang paham.
Hapusmba nama templatenya apa ? beli di mana?
BalasHapusBikin sendiri. Nggak ada namanya.
HapusKalo mau beli yang mirip template ini, namanya Igniplex.
https://www.igniel.com/2018/12/igniplex-premium-blogger-template.html
Ntaps
BalasHapusMba kok eror ya pas di save. Tulisannya kayak ini
BalasHapusInvalid variable declaration in page skin: Variable is used but not defined. Input: tabs.overflow.selected.color
Variabel tabs.overflow.selected.color belum tertulis. Pastikan salin semua kode yang ada di tutorial.
HapusCoba dulu..Moga aja sukses
BalasHapusMantap gan laman website nya. Bagus
BalasHapusKlo pake template yg gak pake variabel gimana sist ?
BalasHapusSama aja. Tinggal tambah kodenya.
Hapus
BalasHapusInvalid variable declaration in page skin: Variable name must not be declared twice. Input: body.font
Itu udah jelas pesan errornya. Kalo masih belum paham baca komentar-komentar di atas.
HapusDi blog saya work mba, tapi kok di samping profil orang yang komen, kok ada nomornya-nomornya gitu mba, gimana ngilangin nomornya mba
BalasHapusItu karena CSS. Tambahin ini.
Hapus#comments ol, #comments ol li{
list-style:none;
list-style-type:none;
}
Error kak gatau dimana nya
BalasHapusdisaya gak ada data:post.commentFormIframeSrc link andromaxdewadewi.blogspot.com
BalasHapusMbak.. Di saya muncul error seperti ini Kami tidak dapat menyimpan tema Anda.
BalasHapusTema 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?
Udh bisa.. Thanks ilmu nya
HapusInvalid variable declaration in page skin: Variable name must not be declared twice. Input: body.font
BalasHapusBaca komentar-komentar sebelumnya buat cari solusinya.
HapusInvalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color
HapusBACA komentar-komentar sebelumnya buat cari solusinya.
Hapuskepingin form komentar kaya seperti blog ini..., milik saya bagus sih.. suman kurang nyaman aja kenapa setiap reply komentar hasilnya form komentarx mengecil.
Hapustidak seperti blog ini tetap rata menggantung...
mengharap sekali ada tutorialnya ... salam
Makasih Mbak Igniel WORK!!!
BalasHapusUntuk hasilnya silahkan kunjungi blog Saya : https://www.topgadgetid.online
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
BalasHapussolusinya kak
BalasHapusInvalid variable declaration in page skin: This is not a valid type for a variable. Input:
kok saya nggak work ya mbak ? Mohon Pencerahanya
BalasHapusterima kasih banyak mbak.
BalasHapusmb ini gmana y, aq coba kx muncul notifikasi "Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background"
BalasHapusSaya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~
BalasHapusSaya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~
BalasHapusSaya gabisa mba, udah dipasang eh Halaman statisnya pada hilang~
BalasHapusIts work mba igniel thanks infonya, btw boleh saya bantu share artikelnya di blog saya mba?
BalasHapusSilakan mas. Cantumkan sumbernya ya.
HapusPasti mba https://myzozieman.blogspot.com/2019/08/cara-mengganti-kotak-komentar-dengan.html?m=1
HapusSiip Mbak, siap eksekusi blog nih, moga work^_^
BalasHapusMba, di blogku ngga berhasil mulu.
BalasHapusArtikelnya menarik dan bagus bermanfaat sekali jangan lupa kunjungi balik guna.site
BalasHapusBerhasil mba, dan ternyata ada triknya biar ga error.
BalasHapusterimakasih
BalasHapusInvalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed .................
BalasHapusMuncul begitu teh igniel
kk bantu donk kode data:post.commentFormIframeSrc g ada di template blogkku Revoltify Premium dari arlina design
BalasHapusSaya suka template yg kmu pake mba
BalasHapusgagal total
BalasHapus'Invalid variable declaration in page skin: Variable is used but not defined. Input: label.border.color'
BalasHapusada error begitu?? kenapa ya . . .
Pada template emporio tulisan "enter your comment" tertutup oleh "comment as:". Ada solusinya?
BalasHapuseror mulu
BalasHapuskenapa tak mau tampil di blog sy ya?
BalasHapushttp://bloggerhanasangkala.blogspot.com
sy menggunakan templates gridify
<php echo'IGNIEL.COM Blog Favoritku';?>
BalasHapussaya mau pake ini gimana ya kak?
BalasHapus< 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
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
BalasHapusuntuk blogger v3 gimana kak? saya udah coba menerapkan di blogger v3, gak work
BalasHapusthanks kak
BalasHapusmbak igniel kog ditempat saya g ada data:post.commentFormIframeSrc appendParams {skin: "contempo"}
BalasHapuspake template mediumish
https://www.wahyudimana.co
mohon di cek dan dibantu mbak igniel
Hi, kenapa di template yang saya pakai tidak ada "data:post.commentFormIframeSrc" ya ? Saya pakai template Digizena Responsive Blogger dari idtheme
BalasHapusterimakasih
Invalid variable declaration in page skin: Variable is used but not defined. Input: fff
BalasHapuswhat this ? keterangan cuma fff mksdnya error dmna ya mbak ?
Udah dicoba! maknyus dan work mba!
BalasHapusWork mba, terima kasih!
BalasHapusMantap
BalasHapusKeren, berhasil. Kotak komentar baru selalu jadi pilihan saya. Tidak mau balik ke yang lama.
BalasHapusSaya pake template Takis, kolom komentar defaultnya ga muncul. Kenapa ya?
BalasHapusdi saya langsung berhasil.... thanks mr.igniel
BalasHapustampilan komentar nya berhasil berubah, tapi mbak knapa ya pas klik tombol reply ko jadi keluar new tab about:blank?
BalasHapusAda script lain nggak yang bikin semua link terbuka di tab baru?
Hapusgak tau mbak, ngecek nya gimana ya?
Hapusmbak izin tanya, maaf agak oot. cara ngecilin ukuran avatar di komentar bagaimana ya? Ini di tema yang saya pakai kok avanya besarnya full dan ukuran fontnya juga ngga pas gitu (bagian komentar kacau). Mohon bantuannya... web: odiezain.com
BalasHapusMau ganti kek gini malah jadi error hha, kaget saya. Itu kenapa ya?
BalasHapuspada kode yang saya cari <![CDATA[/* tidak apa apa kan ?
BalasHapusMba, Saya mau tnya dong saya udah terapin semua saya save berhasil kesave temanya, Kolom komentar reply/tulis komentar baru normal yang ga normal itu 'Beri tahu saya' > 'Publikasikan' tidak muncul atau tidak ada, Mohon solusi nya adakah artikel yang mengatasi hal tsb?
BalasHapusTerima kasih mba.
Terimakasih Mbak dah oke
BalasHapusAlhamdulillah work cuma kok muncul scroll ya di blog saya...
BalasHapusKalo saya error seperti ini, apakah ada solusi, saya sudah hapus baris tersebut malah muncul lebih banyak error.
BalasHapusInvalid variable declaration in page skin: Variable is used but not defined. Input: color.footer.social
Ups, tampaknya ada yang salah.
BalasHapusKami mohon maaf atas ketidaknyamanan ini.
Coba segarkan halaman untuk melihat apakah semuanya kembali seperti semula.
cara ngatasinya Gmna?
request dong min, cara mengganti komentar disqus bawaan ke komentar default
BalasHapusScript bawaan V2.6 pada template Igniplex saya ganti dengan script V2.5 karena saya tidak suka load more dengan tombol nomer. Work sieh meski saya ganti, namun sekarang masalahnya tombol repply komentar tidak berfungsi/Apa ada solusi lain untuk bisa berfungsi lagi?
BalasHapusMohon penerahannya, makasih sebelumnya.
Salam.
Jangan sembarangan ganti script bawaan. Nanti nggak jalan fiturnya.
HapusDi v2.6 udah ada pilihan navigasi. Ada infinite scroll sama navigasi bernomor. Udah keren.
Kalau mau pake infinite scroll tinggal ganti aja pilihan navigasinya. Tutorial ada di MEMBER AREA.
Mba, tombol balas komentarnya ko jadi gak bisa di klik ya?
BalasHapussis it's show error https://www.technomania.xyz/ it's my blog please see
BalasHapuskalau saya coba kok pas saya lihat pratinjaunya kok malah muncul error seperti ini "Deklarasi variable tidak valid pada skin halaman: Nama variable tidak boleh didekralasikan dua kali. Input: body.font
BalasHapusError 400". Itu masalahnya di mana ya? Mohon pencerahannya
mbak mohon bantuannya kenapa kolom komentar saya hilang ya mbak?
BalasHapuserror gann
BalasHapusmantap euy jadi keren tampilannya. tapi saya mau nanya kalo perbaiki posisi pesan komentarnya supaya diatas kaya blog igniel ini gimana? soalnya punya saya pesan komentarnya masih dibawah
BalasHapusMantap... makasih infonya
BalasHapusdamnggg it works kak, thank a lot :')))
BalasHapusBlog saya memilliki fitur dark mode seperti blog ini.
BalasHapusPertanyaannya, apakah bisa backgroundnya mengikuti dark mode?
Waena background komentar tidak bisa diubah secara toggle seperti dark mode.
Hapus