Mengganti Tampilan Komentar Blogger Lama dengan Tampilan Baru - Tuan Siput
Setiap blog memiliki kolom komentar yang akan tampil dibagian bawah suatu postingan. Kolom komentar ditampilkan bukanlah hanya sekedar perias atau pelengkap pada tampilan, namun sebagai salah satu fitur penting yang memang wajib dimiliki oleh setiap blog.

Fungsi komentar yaitu sebagai kolom dimana pengunjung mengomentari mengenai postingan tersebut, selain itu kolom komentar juga akan sangat memudahkan ketika dalam artikel terdapat hal yang kurang berkenan atau pertanyaan karena dengan kolom komentar maka pengunjung akan langsung memberikan tanggapan baik pertanyaan, saran maupun kritik dengan leluasa tentang artikel tersebut.

Berbicara soal kolom komentar, saat ini template standar blogger yaitu Contempo, Soho dan Emporio memiliki tampilan baru pada kolom komentarnya. Kalau menurut saya tampilan ini lebih keren, terlihat elegant dan juga simple.

Meskipun keren, namun kolom komentar yang baru tidak banyak diterapkan di template blogger yang dibuat oleh para pembuat template.

Tapi jangan khawatir, karena dalam artikel ini akan saya berikan beberapa langkah mudah untuk Mengganti Tampilan Komentar Blogger Lama Dengan Tampilan Baru yang saya dapatkan dari bloggerku.com.

1. Masuk ke "Blogger.com" > pilih "Tema" > klik "Edit HTML" kemudian copy dan paste kode berikut ini tepat di bawah atau setelah kode <b:skin>

<Group description="New Comment Required - Dont edit">
<Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/>
<Variable name="body.font" description="Font" type="font" default="normal normal 14px 'roboto', sans-serif" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222"/>
<Variable name="body.text.font" description="2"
      type="font"
      default="$(body.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.background.color" description="6"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="body.link.color" description="7"
      type="color"
      default="#2196f3" value="#2196f3"/>
<Variable name="body.link.visited.color" description="8"
      type="color"
      default="$(body.link.color)" value="#2196f3"/>
<Variable name="body.link.hover.color" description="9"
      type="color"
      default="$(body.link.color)" value="#2196f3"/>
<Variable name="blog.title.font" description="10"
      type="font"
      default="$(robotoBold45)" value="$(robotoBold45)"/>
<Variable name="blog.title.color" description="11"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="header.icons.color"
      description="12"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="13"
      type="font"
      family="$(body.font.family)"
      size="$(body.font.size)"
      default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/>
<Variable name="tabs.color" description="14"
      type="color"
      default="#ccc" value="#cccccc"/>
<Variable name="tabs.selected.color" description="15"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="16"
      type="color"
      default="$(posts.background.color)" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="17"
      type="color"
      default="$(posts.text.color)" value="#222222"/>
<Variable name="tabs.overflow.selected.color" description="18"
      type="color"
      default="$(posts.title.color)" value="#212121"/>
<Variable name="posts.title.color" description="19"
      type="color"
      default="#212121" value="#212121"/>
<Variable name="posts.title.font" description="20"
      type="font"
      default="$(robotoBold22)" value="$(robotoBold22)"/>
<Variable name="posts.text.font" description="21"
      type="font"
      default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.text.color" description="22"
      type="color"
      default="$(body.text.color)" value="#222222"/>
<Variable name="posts.icons.color"
      description="23"
      type="color"
      default="#707070" value="#707070"/>
<Variable name="labels.background.color"
      description="24"
      type="color"
      default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/>
</Group>

2. Cari dan ganti semua kode "commentFormIframeSrc" dengan kode di bawah ini.

commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam

3. Setelah itu "save" dan lihat hasilnya.

Note!!!
Bagi yang tidak dapat menemukan code "commentFormIframeSrc", ikuti langkah berikut.

Cari kode di bawah ini:

<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

Kemudian ganti dengan kode berikut:

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

Meskipun memiliki fungsi yang sangat penting, tapi tidak semua blog menampilkan kolom komentar karena ada beberapa blog yang tidak menampilkannya, entah apa yang membuat sampai pemilik blog lebih menginginkan agar kolom komentar tidak ditampilkan.

Jadi balik lagi ke blog tersebut dan ke penulisnya apakah ingin menampilkan kolom komentar ataupun tidak.

Mengganti Tampilan Komentar Blogger Lama dengan Tampilan Baru

Setiap blog memiliki kolom komentar yang akan tampil dibagian bawah suatu postingan. Kolom komentar ditampilkan bukanlah hanya sekedar perias atau pelengkap pada tampilan, namun sebagai salah satu fitur penting yang memang wajib dimiliki oleh setiap blog.

Fungsi komentar yaitu sebagai kolom dimana pengunjung mengomentari mengenai postingan tersebut, selain itu kolom komentar juga akan sangat memudahkan ketika dalam artikel terdapat hal yang kurang berkenan atau pertanyaan karena dengan kolom komentar maka pengunjung akan langsung memberikan tanggapan baik pertanyaan, saran maupun kritik dengan leluasa tentang artikel tersebut.

Berbicara soal kolom komentar, saat ini template standar blogger yaitu Contempo, Soho dan Emporio memiliki tampilan baru pada kolom komentarnya. Kalau menurut saya tampilan ini lebih keren, terlihat elegant dan juga simple.

Meskipun keren, namun kolom komentar yang baru tidak banyak diterapkan di template blogger yang dibuat oleh para pembuat template.

Tapi jangan khawatir, karena dalam artikel ini akan saya berikan beberapa langkah mudah untuk Mengganti Tampilan Komentar Blogger Lama Dengan Tampilan Baru yang saya dapatkan dari bloggerku.com.

1. Masuk ke "Blogger.com" > pilih "Tema" > klik "Edit HTML" kemudian copy dan paste kode berikut ini tepat di bawah atau setelah kode <b:skin>

<Group description="New Comment Required - Dont edit">
<Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/>
<Variable name="body.font" description="Font" type="font" default="normal normal 14px 'roboto', sans-serif" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222"/>
<Variable name="body.text.font" description="2"
      type="font"
      default="$(body.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.background.color" description="6"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="body.link.color" description="7"
      type="color"
      default="#2196f3" value="#2196f3"/>
<Variable name="body.link.visited.color" description="8"
      type="color"
      default="$(body.link.color)" value="#2196f3"/>
<Variable name="body.link.hover.color" description="9"
      type="color"
      default="$(body.link.color)" value="#2196f3"/>
<Variable name="blog.title.font" description="10"
      type="font"
      default="$(robotoBold45)" value="$(robotoBold45)"/>
<Variable name="blog.title.color" description="11"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="header.icons.color"
      description="12"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="13"
      type="font"
      family="$(body.font.family)"
      size="$(body.font.size)"
      default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/>
<Variable name="tabs.color" description="14"
      type="color"
      default="#ccc" value="#cccccc"/>
<Variable name="tabs.selected.color" description="15"
      type="color"
      default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="16"
      type="color"
      default="$(posts.background.color)" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="17"
      type="color"
      default="$(posts.text.color)" value="#222222"/>
<Variable name="tabs.overflow.selected.color" description="18"
      type="color"
      default="$(posts.title.color)" value="#212121"/>
<Variable name="posts.title.color" description="19"
      type="color"
      default="#212121" value="#212121"/>
<Variable name="posts.title.font" description="20"
      type="font"
      default="$(robotoBold22)" value="$(robotoBold22)"/>
<Variable name="posts.text.font" description="21"
      type="font"
      default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.text.color" description="22"
      type="color"
      default="$(body.text.color)" value="#222222"/>
<Variable name="posts.icons.color"
      description="23"
      type="color"
      default="#707070" value="#707070"/>
<Variable name="labels.background.color"
      description="24"
      type="color"
      default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/>
</Group>

2. Cari dan ganti semua kode "commentFormIframeSrc" dengan kode di bawah ini.

commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam

3. Setelah itu "save" dan lihat hasilnya.

Note!!!
Bagi yang tidak dapat menemukan code "commentFormIframeSrc", ikuti langkah berikut.

Cari kode di bawah ini:

<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

Kemudian ganti dengan kode berikut:

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

Meskipun memiliki fungsi yang sangat penting, tapi tidak semua blog menampilkan kolom komentar karena ada beberapa blog yang tidak menampilkannya, entah apa yang membuat sampai pemilik blog lebih menginginkan agar kolom komentar tidak ditampilkan.

Jadi balik lagi ke blog tersebut dan ke penulisnya apakah ingin menampilkan kolom komentar ataupun tidak.