Cara Mengganti Kolom Komentar Blogger ke Versi Terbaru (Contempo Skin)

Kolom komentar Blogger terbaru ini disebut dengan Contempo Style atau Contempo Skin. Mengganti tampilan kolom komentar Blogger atau Blogspot ke veri terbaru ini sebetulnya sangat mudah.

Cara Mengganti Tampilan Komentar Blogger ke Versi Terbaru

Beberapa template di Themeindie.com yang sebelumnya menggunakan tampilan komentar versi lawas, kini telah diganti dengan tampilan komentar Blogger versi baru (Blogger v3).

Pada tutorial kali ini, saya akan coba tunjukkan langkah-langkah cara mengganti tampilan kolom komentar Blogger ke versi paling baru. Langkah tutorial juga dapat diikuti oleh siapapun yang hendak mengganti jenis komentar yang digunakannya. Baik itu pengguna komentar Facebook atau komentar Disqus yang hendak mengubahnya ke komentar Blogger versi terbaru.

Cara Mengubah Tampilan Komentar Blogger Versi Lama Menjadi Versi Baru 

Berikut ini langkah-langkah cara mengubah tampilan komentar Blogger ke veri baru, biar tampilan kolom komentarnya macam komentar pada template Contempo, Soho, Emporio dan Notable.

Wajib menambahkan Variable Definitions

Untuk memulai pengerjaan, silahkan login ke Blogger, lalu buka Edit HTML template yang ingin diubah tampilan komentarnya.

Langkah pertama yang wajib dilakukan adalah menambahkan beberapa baris Variable Definitons yang dibutuhkan.

Silahkan cari kode ]]></b:skin> lalu paste kode berikut ini di atasnya:

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

Mengganti semua kode `data:post.commentFormIframeSrc`

Temukan semua kode data:post.commentFormIframeSrc pada template, lalu ganti dengan kode komentar Blogger terbaru berikut ini:

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

Untuk mempercepat pekerjaan, gunakan fitur Replace All dengan tekan tombol CTRL + Shift + R.

Sampai pada langkah Anda sudah bisa menyimpan perubahan pada template.

Bila kedua langkah di atas berhasil diterapkan tanpa kendala, maka dapat dipastikan tampilan kolom komentar Blogger sudah berganti menjadi kolom komnetar versi terbaru (Blogger v3).

Namun demikian, bila tidak ada perubahan pada tampilan kolom komentar, silahkan lanjutkan ke langkah berikut ini.

Memformat semua `b:includable` yang berkaitan dengan `comments`

Anggaplah format main section yang memuat widget Blog1 pada template Anda adalah seperti pada gambar berikut.

Cara Mengganti Kolom Komentar Blogger ke Versi Terbaru (Contempo Skin)

Pada gambar di atas terdapat sejumlah bari kode yang ditandai. Yaitu kode-kode `b:includable` dari komentar Blogger yang telah disusutkan. Daftarnya kurang-lebih seperti berikut ini:

<b:includable id='comment-form' var='post'>↔</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>↔</b:includable>
<b:includable id='comment_count_picker' var='post'>↔</b:includable>
<b:includable id='comment_picker' var='post'>↔</b:includable>
<b:includable id='comments' var='post'>↔</b:includable>
<b:includable id='iframe_comments' var='post'>↔</b:includable>
<b:includable id='threaded-comment-form' var='post'>↔</b:includable>
<b:includable id='threaded_comment_js' var='post'>↔</b:includable>
<b:includable id='threaded_comments' var='post'>↔</b:includable>

Silahkan hapus semua kode tersebut, lalu Simpan Template.

Setelah itu, Anda perlu refresh kembali halaman Edit HTML, dengan mengklik tombol F5 pada keyboard atau dengan mengklik ikon refresh pada browser.

Selanjutnya, lakukan kembali langkah 2 di atas.

Solusi bila halaman post menjadi blank atau komentar tidak muncul

Tidak perlu khawatir bila tiba-tiba halaman postingan menjadi blank, ataupun daftar dan kolom komentar tidak muncul.

Silahkan temukan kode <b:include data='post' name='post'/> lalu letakkan kode berikut ini di bawahnya:

    <!-- Comments -->
    <b:include cond='data:view.isSingleItem' data='post' name='comment_picker'/>

Atau, jika Anda pengguna template Blogger v3, gunakan kode berikut ini:

    <!-- Comments -->
    <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

Sekarang simpan template, lalu lihat hasilnya.

Komentar sudah muncul dan tampilan kolom komentar sudah berubah jadi versi komentar Blogger terbaru, tetapi masih berantakan?

Berarti tinggal memperbaiki CSS-nya. Anda bisa menggunakan CSS berikut ini.

Menambahkan CSS komentar Blogger versi baru

Silahkan gunakan CSS berikut ini untuk memperbaiki tampilan komentar Blogger versi baru yang masih berantakan. 

Anda bisa gunakan CSS komentar versi baru pada template SimpleON, dengan inspect element pada halaman postingan.

Atau, silahkan mengambil CSS berbeda dari source lain.

Silahkan simpan kembali template Anda, lalu lihat hasilnya.

Akhir Kata

Sebetulnya sudah sejak lama saya hendak menulis tutorial ini. Cuma seringkali lupa dan kalua ingat saya abai. Jadi mohon maaf bagi siapapun yang sempat menanyakan tutorial ini sejak lama. Mudah-mudahan masih relevan dengan kondisi Anda.

Bagi pengguna template Gampang, Takis dan Risen template yang ingin mencoba peruntungan dalam menggunakan tampilan kolom komentar Blogger versi baru, silahkan berlatih ngutak-ngatik kode pakai tutorial ini.

Demikian, sekian dan terima kasih!

Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates