Cara Mengganti Tampilan Komentar Blogger Versi Terbaru

Artikel kali ini saya akan membagikan tutorial singkat bagaimana cara mengganti tampilan komentar blogger versi terbaru.

Sebelum ke pembahasan saya akan sedikit menjelaskan, ketika blogger mengeluarkan template baru v3 ada satu hal yang menarik, yaitu tampilan komentarnya yang berubah. Pada tampilan versi terbaru ini lebih terkesan minimalis dan modern.

Tampilan komentar versi terbaru ini hanya tersedia pada template terbaru v3 seperti: Cotempo, Soho, Emporio dan Notable. Pada tutorial ini saya akan menjelaskan bagaimana cara mengganti tampilan komentar blogger versi terbaru tanpa harus berganti template.

Langkah-langkah mengganti tampilan komentar blogger terbaru:

1. Cari kode <b:skin><![CDATA[

2. Salin kode dibawah ini, lalu pastekan tepat 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>

Keterangan:

1. Value #008c5f dalam body.link.color adalah warna dari link di dalam kontak komentar.

2. Ganti value sesuai dengan warna template Anda.

3. Cari data:post.commentFormIframeSrc atau berjumlah lebih dari satu, pilih semuanya dan ganti dengan kode komentar blogger versi terbaru di bawah ini:

data:post.commentFormIframeSrc appendParams {skin: "contempo"}

Kode lengkap seperti di bawah ini:

</a><a expr:href="data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}" id="comment-editor-src"></a>

4. Selesai! Simpan

Cukup mudah bukan? Itulah artikel mengenai cara dan tutorial bagaimana cara mengganti tampilan komentar blogger versi terbaru.

Tweet