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

6 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

Centang kotak "NOTIFY ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.