Cara Mengganti Tampilan Komentar Blog Versi Lama Menjadi Versi Terbaru

Meski beberapa template default blogger terbaru sudah dirilis sejak beberapa tahun yang lalu, tampaknya masih banyak blogger yang masih bertahan untuk menggunakan template versi lama atau template hasil download/beli dari kreasi para desainer template. Terserah kita memang, namun jika masih ingin bertahan memakai template versi lama, paling tidak kita juga harus mengupgradenya agar tidak kalah performanya dengan template-template versi baru tersebut.

Selain mengatur keresponsivan versi mobile, pengaturan SEO, dll, hal yang juga ada baiknya kita upgrade adalah segi tampilan fitur-fitur utama blog. Salah satunya yaitu tampilan kotak komentar agar pengunjung bisa berinteraksi atau bertanya jawab dengan kita. Banyak penggguna template versi lama yang telah mengubah tampilan kotak komentarnya menjadi seperti kotak komentar pada template default terbaru seperti cotempo, notable, soho, dsb. 

Pada awalnya, saya memang bertahan menggunakan tampilan kotak komentar versi lama agar tampak lebih klasik. Namun lama kelamaan, akhirnya saya bosen juga dan kini memutuskan untuk ikut-ikutan mengubah tampilan komentar di blog ini mengikuti tampilan versi barunya. Lihat perbandingan tampilannya pada gambar di bawah ini:

Jika anda perhatikan, tampilan form komentar versi baru ini memang lebih simpel ketimbang versi sebelumnya. Dengan kata lain, tampilannya terasa lebih minimalis tanpa banyak memakan ruang di sekelilingnya. Selain itu, tampilannya juga tampak lebih modern, keren, dan lebih mudah digunakan. Hanya saja, memang di versi terbaru ini tidak ada fitur pratinjau komentar seperti halnya pada versi lama. Meskipun begitu, saya rasa tidak masalah. Mungkin memang sengaja dihilangkan. 

Nah, bagi anda yang juga ingin mengubah tampilan komentar versi lawasnya agar menjadi seperti versi terbarunya, silahkan ikuti langkah-langkah di bawah ini untuk penerapannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode <b:skin><![CDATA[ kemudian letakkan kode berikut ini 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>

4. Selanjutnya silahkan cari kode berikut ini:

data:post.commentFormIframeSrc

Mungkin jumlahnya ada lebih dari satu di dalam template, silahkan ganti kode tersebut dengan kode di bawah ini:

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

Berikut ini contoh tampilan lengkap kodenya sebelum diganti dan setelah diganti. 

Sebelum diganti:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Setelah diganti:

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

5. Simpan kembali template anda dan lihat hasilnya.

Silahkan anda bisa mencobanya untuk mengetahui bahwa form komentar tersebut berfungsi dengan baik. Cukup mudah bukan?. Demikianlah cara mengganti tampilan komentar Blog versi lama menjadi seperti versi terbaru. Semoga bermanfaat.

Lokasi:

Berbagi :