Ganti Tampilan Komentar Blog Lama Ke Versi Baru! Caranya Baca Disini!

Ketika blogger mengeluarkan template barunya yang 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 ini tapi tersandung masalah besar yaitu, harus ganti template. Ini karena formulir komentar tersebut hanya tersedia di template v3 terbaru seperti Contempo, Soho, Emporio, dan Notable. Tapi jangan  khawatir, karena tutorial kali ini aku akan menjelaskan tentang bagaimana cara memasang kotak komentar bawaan blogger versi terbaru, tanpa harus ganti template secara keseluruhan.

Cara Mengubah Komentar Blog Menjadi Versi Baru

#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Cari kode <b:skin><![CDATA[ dan simpan kode berikut tepat diatas atau dibawahnya.

<!-- 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 sobat.

#4. 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'/>

#5. Jangan lupa simpan pengaturan dengan klik tombol Save theme.
#6. Selesai.

Baca juga : cara mudah bedain admin dengan pengunjung blog part 1

Cuma sedikit kan pengaturannya? hehehe. Karena cara mengubah tampilan comment form di blog menjadi versi baru ini memang gampang banget buat dipraktekan. Bisa bikin tampilan makin keren dan tidak ketinggalan jaman tentunya. 

Masa sih masih pakai versi yang lama, kan kurang asik hehehe. Terus coba deh cek tampilan blog sobat dan lihat hasilnya. Apakah berhasil atau gagal. Kalau berhasil aku ucapkan selamat, kalau gagal silahkan komen dibawah karena kode setiap template mungkin tidak sama. Semangat mencoba!   

Share this post