Nofantz Nofantz 5/16/2019

Mengubah tampilan komentar blogspot versi lama menjadi versi baru

Mengubah tampilan komentar blogspot versi lama menjadi versi baru


Ditutorial kali ini saya akan membahas mengenai cara Mengubah tampilan komentar blog versi lama menjadi versi baru pada platform Blogspot.

Pernah ya memperhatikan ada yang beda dengan kolom komentar blogspotnya, contoh saja kolom komentar pada template VioMagz. Sepertinya kok kelihatan Fresh gitu, lebih modern dan bersih. Awalnya berfikir, mungkin karena ini memang dari Skin Template nya. Tetapi ketika membuka blog lain dengan Template yang berbeda, ternyata memiliki model yang sama. Berarti bukan dari Template nya donx.

Dari situ kepikiran, kok bisa begitu ya. Browsing sana browsing sini, akhirnya menemukan pencerahan, ternyata itu memang kolom komentar versi baru dari platform blogspot. Akhirnya mulai deh cari referensi cara mengubah tampilan komentar blogspot versi lama menjadi versi baru dan langsung di terapkan di blog ini dan hasilnya Work 100% alias Tested.

Kalau kalian penasaran bagaimana cara mengubah tampilan komentar blogspot versi lama menjadi versi baru, simak tutorial berikut.

#1. Langkah Pertama

  • Cari kode data:post.commentFormIframeSrc pada template kalian, biasanya ada banyak.
  • Ganti semuanya dengan kode data:post.commentFormIframeSrc appendParams {skin: "contempo"}.
  • Kemudian Simpan.

#2. Langkah Kedua

  • Cari kode ]]></b:skin> pada template blog kalian.
  • Copy kode CSS di bawah ini dan taruh tepat diatas ]]></b:skin>.
  • Kemudian Simpan.

<Group description="Komentar Baru FolderBlog.Net (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="#03214c" value="#03214c"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#03214c" value="#03214c"/>
 <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>

#3. Error dan Solusi

Bila menemukan error saat menyimpan Template, misal


Invalid variable declaration in page skin: Variable name must not be declared twice. Input: posts.background.color

solusinya, hapus kode CSS berikut:

<Variable name="posts.background.color" description="2"
type="color"
default="#fff" value="#ffffff"/>

Kemudian Simpan
begitu juga dengan yang lain, hapus variable yang berkaitan dengan error nya.

#4. Test

Selanjutnya silahkan buka postingan blog kalian dan cek pada bagian komentarnya, apakah sudah berubah dengan model komentar yg baru?

Sekian dari saya, Selamat mencoba.

0 Comments