Cara Ubah Tampilan Kolom Komentar Blogger ke Versi Terbaru

WANHEART NET - Cara Ubah Tampilan Kolom Komentar Blogger ke Versi Terbaru. Pada saat blogger mengeluarkan template versi terbaru, ada satu hal yang menarik dari update tersebut yaitu berubahnya tampilan kolom komentar blogger. Desain tampilan kolom komentar yang simple menjadikan blog lebih elegan, sehingga kolom komentar blogger terbaru ini dinamai dengan Contempo Skin atau Contempo Style.

Kolom komentar Blogger versi terbaru menjadi banyak peminat, sehingga banyak yang ingin mencobanya. Mungkin anda sempat berfikir, Apakah bisa mengubah tampilan kolom komentar blogger ke versi terbaru tanpa perlu ganti template ? Jawabannya adalah Bisa. Jadi tidak usah khawatir, anda bisa mengganti kolom komentar blogger ke versi terbaru tanpa perlu ganti template.

Pada kesempatan kali ini, saya akan memberikan tutorial bagaimana cara mengganti kotak komentar atau kolom komentar blogger ke versi terbaru tanpa perlu ganti template. Oke langsung saja berikut artikelnya.

Cara Ubah Tampilan Kolom Komentar Blogger ke Versi Terbaru

1. Silakan masuk ke blogger.
2. Masuk ke Menu Tema, klik icon segitiga kecil sebelah sesuaikan, kemudian pilih Edit HTML.
3. Cari Kode <b:skin><![CDATA[
4. Letakkan kode berikut di Bawah Kode yang di Cari tadi.

<!-- DO NOT Delete These Variable definitions -->
<Group description="Background, Font and Link Color for New Blogger Comment (Contempo Style)">
 <Variable name="body.background" description="Body Background" type="background" color="#F6F9FC" default="#F6F9FC none repeat scroll top left" value="#F6F9FC none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 15px 'Segoe UI', Roboto, sans-serif" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#2A2A2A" value="#2A2A2A"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 15px 'Segoe UI', Roboto, 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="#0277D4" value="#0277D4"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#0277D4" value="#0277D4"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#2A2A2A" value="#2A2A2A"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, 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 15px 'Segoe UI', Roboto, 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="#2A2A2A"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="khaki"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="teal" value="teal"/>
</Group>

5. Cari kode data:post.commentFormIframeSrc biasanya jumlahnya lebih dari satu. Kemudian Ganti kode tersebut dengan kode komentar blogger versi terbaru berikut.

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

Agar mempermudah pekerjaan, Anda bisa gunakan shortcut Ctrl + Shift + R untuk Replace All. Salah satu Contoh kode perubahannya akan 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'/>

6. Terakhir silakan, Simpan Tema. Jika anda berhasil menyimpan template, maka dipastikan kolom komentar blogger sudah terganti ke versi terbaru.

Pada tampilan kolom komentar blogger versi terbaru ini, ada beberapa fitur yang hilang dari versi sebelumnya yaitu fitur Preview. Namun hilangnya fitur tersebut, terbalas dengan tampilan desain kolom komentar blog yang sederhana dan elegan.

Demikian tutorial Bagaimana Cara Ubah Tampilan Kolom Komentar Blogger ke Versi Terbaru, Jika ada yang ingin di tanyakan anda bisa komen dibawah. Terima kasih.