Cara Mengubah Tampilan Komentar Blogger Ke Versi Terbaru

Pengen tahu bagaimana cara mengubah tampilan komentar blogger ke versi terbaru tanpa ganti template baru? Yuk intip tutorialnya di sini. 

Cara mengubah tampilan komentar blogger ke versi terbaru mudah sekali

Dari awal punya blog sampai sekarang saya masih setia pakai template dari pihak ketiga. Sebelumnya saya memang nggak tertarik mau pakai template bawaan blogger karena di mata saya tampilannya kurang menarik dan terkesan kuno gitu. Makanya saya nggak terlalu update soal template default blogger.

Saya malah baru tahu ternyata blogger sudah merilis template model terbarunya sejak Maret 2017. Duh, kemana saja selama ini. Tahu gitu saya nggak perlu pusing-pusing cari template gratisan dari pihak ketiga kalau nyatanya template terbaru dari blogger yang ada sekarang nggak kalah cakep.

Kini template bawaan blogger hadir dengan tampilan yang lebih dinamis, minimalis, responsive, mobile friendly dan  SEO friendly. Sudah support layout blogger versi 3 juga.

Ya pokoknya banyaklah kelebihan dari template bawaan blogger versi terbaru. Bahkan kalau mau dilihat dari segi SEO dan kecepatannya, template bawaan blogger bisa lebih unggul dibanding template gratisan dari pihak ketiga.


Kenapa? Karena template terbaru yang disediakan blogger telah dirancang sesuai kaidah SEO yang benar, sudah teruji pula keamanannya dan yang pasti memiliki struktur template yang kuat dan valid. Apalagi kalau kita jago design ulang template blog. Mau memodifikasi template terbaru ini lewat menu edit html atau fitur desainer blog tentu mudah sekali.  

Beda hal jika menggunakan template blog dari pihak ketiga terutama yang gratisan. Selain masih banyak kekurangannya di sana-sini, sulit pula dimodifikasi, iya kan?

But well saya nggak bakal bahas soal itu lebih lanjut di postingan ini. Back to the tittle, mari kita langsung saja fokus dengan pembahasan mengenai tampilan komentar blogger versi terbaru.


    Tampilan komentar blogger versi terbaru

    Tampilan komentar blogger versi terbaru tidak monoton

    Salah satu hal yang menarik perhatian banyak pengguna blogspot ketika blogger rilis template terbaru adalah tampilan komentarnya. Mungkin kamu sudah sering blogwalking dan bertemu blog dengan tampilan komentar blogger kayak gambar di atas. Yup, itu adalah tampilan komentar blogger versi terbaru.

    Waktu pertama kali lihat model kotak komentar seperti itu di blog lain saya sempat heran dan membatin, kok beda. Lalu berpikir ah mungkin tampilannya begitu karena bawaan template yang digunakan.

    Belakangan baru saya ketahui ternyata tampilan komentar tersebut merupakan bawaan dari template blogger versi terbaru. Kalau saya perhatikan rata-rata teman blogger yang menggunakan template baru pasti tampilan komentarnya seperti itu sedangkan lainnya masih yang betah dengan comment form komentar versi lawas.

    Perubahan pada tampilan komentar ini memang cukup menonjol, kan? Nah, kira-kira kamu lebih suka yang mana nih, tampilan komentar blogger versi lawas atau versi terbaru?

    Tampilan komentar blogger versi terbaru vs versi lawas

    Jika ditanya mana yang lebih bagus antara tampilan komentar blogger versi terbaru dan tampilan komentar blogger versi lawas, maka saya akan menjawab keduanya sama bagusnya kok.

    Ini cuma masalah selera saja. Sama halnya ketika kamu ditawarkan produk skincare yang komposisinya sama. Isinya juga sudah pasti sama, cuma beda di kemasan doang. Satunya kemasan lama sedangkan yang satu lagi kemasan baru.

    Atau ketika kamu hendak membeli sebuah novel di toko buku dan menemukan dua novel dengan judul, penulis dan penerbit yang sama, namun covernya berbeda. Ternyata yang satu adalah novel dengan cetakan lawas, sedangkan satunya cetakan terbaru.

    Kamu mau pilih novel dengan cover yang mana ya terserah kamu. Mau pilih yang cetakan lama, oke, yang terbaru juga oke. Toh isi dari novel tersebut nggak ada perubahan sama sekali. Ini kalau misalkan novel cetakan lawas masih ada yang terjual ya tapi biasanya sih novel cetakan terbaru muncul setelah cetakan lawas habis terjual di pasaran😀

    Intinya sih kalau dilihat dari segi kegunaan nggak ada yang berubah pada komentar blogger versi terbaru. Makanya masih banyak blogger yang betah menggunakan komentar versi lama. Perubahan tampilan komentar setelah blogger merilis template model kekinian cuma terletak pada segi tampilannya saja yang memang terkesan lebih minimalis dan modern.
    Jadi sekali kalau ditanya mana yang lebih bagus, ini cuma masalah selera saja ya, Gaes.

    Alasan mengganti tampilan komentar blogger ke versi terbaru

    Of course, setiap orang punya selera masing-masing dan masalah selera ini termasuk hal yang nggak bisa dipaksakan. But least, di postingan ini saya bakal kasih alasan kenapa kamu perlu mengganti tampilan komentar blogmu ke versi terbaru.

    Barangkali 3M berikut ini bisa jadi pertimbangan buat kamu jika ingin beralih menggunakan kotak komentar blogger model terbaru ;

    1. Minimalis

    Siapa yang setuju kalau tampilan komentar blogger versi terbaru terlihat lebih keren dan menarik? Cuss angkat tangan. Dibanding komentar blogger model lama, saya lebih suka dengan versi ini karena minimalis banget. Di mata saya, minimalis itu keren.

    Coba deh perhatikan dan bandingkan. Kolom komentar versi terbaru hanya dibatasi dengan dua garis putus-putus atas bawah sehinga terlihat menyatu dengan template. Sedangkan pada versi lawas kolom komentarnya berada dalam kotak tersendiri sehingga tampak tidak menyatu dengan template dan terkesan lebih besar.

    Menariknya,  ketika hendak meninggalkan komentar, kolom komentarnya akan berubah dan memunculkan fitur login, opsi select profil untuk berkomentar sebagai, tombol publikasikan dan beri tahu saya - yang pada versi lawas terlihat monoton.

    Sayangnya satu saja sih kekurangan dari komentar versi lawas ini, nggak ada fitur pratinjau komentar-nya entah karena kelupaan atau memang sengaja dihilangkan.

    Nah, kalau kamu suka tampilan minimalis dan bosen dengan kolom komentar yang monoton, tidak ada salahnya kamu perlu coba tampilan komentar versi terbaru ini.

    2. Modern

    Namanya juga tampilan komentar dengan model terbaru pastilah terlihat jauh lebih modern ketimbang model lama. Justru kalau masih bertahan dengan komentar versi lawas orang-orang bisa menebak kalau template yang kamu pakai template jadul.

    Ya sebenarnya nggak masalah sih kalau kamunya lebih suka dengan tampilan komentar lama tapi kalau ingin template blog kamu nggak dicap ketinggalan zaman nggak ada salahnya kamu beralih ke kotak komentar versi terbaru.

    3. Mudah

    Wah saya jadi tertarik mau coba tampilan kolom komentar versi terbaru itu di blog saya tapi gimana ya? Apa saya harus ganti tema blog dulu dengan menggunakan template bawaan blogger baru bisa menikmati kolom komentar tersebut?  Tapi kalau ganti template traffic blog saya anjlok. Saya juga sudah terlanjur cinta dengan template blog yang saya gunakan sekarang jadi gimana dong?

    Eits, don't worry. Nah, ini alasan yang mungkin bisa bikin kamu tambah yakin buat segera beralih menggunakan kolom komentar terbaru seperti punya saya. Kamu nggak perlu ganti template secara keseluruhan untuk memasangnya di blog kamu. 

    Di postingan ini saya bakal bocorin ke kamu cara mengubah tampilan komentar blogger versi lama ke versi terbaru. Caranya mudah banget, hanya dengan sedikit pengaturan saja kamu sudah bisa mendapati tampilan komentar di blogmu menjadi lebih minimalis dan kekinian.

    Ketiga alasan di atas sepertinya sudah cukup  ya jadi bahan pertimbangan buat kamu untuk memilih setia dengan kolom komentar versi lama atau move on ke versi terbaru.

    Kalau kamu pengen move on, yuk langsung saja intip tutorial mengganti tampilan komentar blogger ke versi ter-update di sini.

    Cara mengubah tampilan komentar blogger ke versi terbaru

    Seperti yang sudah saya singgung di atas, cata mengganti tampilan komentar blogger dari versi lama ke versi terbaru itu mudah banget. Cuma butuh keberanian kamu saja untuk berkutat dengan laman edit html😀

    Oya cara ini saya dapat dari igniel.com dan sudah saya praktikkan sendiri. Sebelumnya blog ini mengunakan kotak komentar model lawas tapi seperti yang kamu lihat sekarang, tampilan komentarnya sudah berubah, kan?

    Nah, kalau kamu juga ingin mengubah tampilan komentar di blog kamu ke versi terbaru berikut ini langkah-langkahnya ;

    1. Buka dashboard blogger dan pilih menu tema

    Setelah muncul laman tema klik tanda panah ke bawah di bawah tombol sesuaikan maka  akan muncul beberapa opsi seperti gambar di bawah ini


    2. Selanjutnya buka edit html tapi pastikan sebelum itu kamu sudah cadangkan tema terlebih dahulu

    Sebelum meluncur ke laman edit html kamu perlu cadangkan tema agar jika nantinya terjadi kesalahan saat pasang kode kamu bisa memulihkan kembali ke tema semula. Kalau langkah ini kamu lakukan kamu nggak perlu takut lagi berhadapan dengan kode-kode html, hehe. 

    3. Setelah di laman edit html cari kode <b:skin><![CDATA[ dan simpan kode berikut ini tepat di bawah atau sesudahnya

    <!-- 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="#bce3ee" value="#bce3ee"/>
    <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="#bce3ee" value="#bce3ee"/>
    </Group>

    Value #bce3ee dalam body.link.color adalah warna dari link di dalam kotak komentar. Value ini bisa kamu ganti atau sesuaikan dengan warna template blogmu.

    4. Masih di laman edit html cari data:post.commentFormIframeSrc yang jumlahnya lebih dari satu. Pilih semuanya lalu ganti dengan kode komentar blogger terbaru berikut ini

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

    Setelah kodenya diganti hasilnya nanti seperti di bawah ini ya  

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

    5. Langkah selanjutnya simpan tema

    Jika setelah klik tombol simpan tema penyimpanan tidak berhasil malah muncul notifikasi seperti di bawah ini kamu nggak usah panik ya.

    Salah satu cara mengganti tampilan komentar blogger ke versi terbaru

    Notifikasi tersebut muncul karena ada variable name yang double. Contohnya kayak gambar di atas. Terjadi invalid variable karena bawaan template yang saya gunakan sudah ada variable body.font. Untuk mengatasinya tinggal dihapus saja baris variable body.font.

    Setelah itu simpan tema kembali, kalau masih muncul notifikasi invalid variable atasi dengan cara yang sama.

    Pada tema bawaan yang saya gunakan ada tiga variable yang menyebabkan invalid yaitu body.font, body.text.color, body.link.color. Setelah menghapus ketiga baris variable tersebut akhirnya perubahan tema yang saya lakukan berhasil tersimpan.

    Di blog kamu mungkin variable yang terdeteksi ganda beda lagi, tergantung template bawaan masing-masing jadi sesuaikan saja dengan notif invalid variable yang muncul. 

    Penyimpanan baru akan berhasil jika semua name variable yang ganda sudah kamu hapus ya. 

    Setelah penyimpanan berhasil silakan cek kolom komentar di blogmu. Gimana? Nggak sulit kan mengganti tampilan komentar lama ke versi terbaru?

    Catatan tambahan, kalau misalkan sudah melakukan langkah-langkah di atas dan hasilnya masih belum berubah berarti masih ada kode data.post.commentFormIframeSrc yang belum terganti dengan kode template blogger terbaru. (Cek kembali langkah 4)

    Tapi kalau kamu edit menggunakan laptop pasti nggak bakal ada kode yang terlewatkan karena terbantu dengan tombol Control+F.

    Kalau saya kemarin melakukan langkah-langkah di atas pakai hp jadi ada kode yang terlewatkan hingga mengalami masalah tersebut. Wajar sih berkutat dengan kode html lewat gawai memang agak ribet tapi bukan berarti nggak bisa ya?


    Oke sekian dulu tutorial mengenai cara mengubah tampilan komentar blogger ke versi terbaru. Semoga postingan ini bermanfaat. Selamat mempraktikkan. 

    Salam, 



    17 komentar untuk "Cara Mengubah Tampilan Komentar Blogger Ke Versi Terbaru "

    Comment Author Avatar
    Wah, baru tau loh, coba ulik deh nanti, makasih mbak Sis :D
    Comment Author Avatar
    Kudu edit html ya. Aku kadang malas, hahaha. Catet dulu. Pas Selo baru action
    Comment Author Avatar
    Makasih mba infonya..punyaku masih pke versi lawas juga. Lebih simpel yang versi baru ya tampilannya
    Comment Author Avatar
    Terima kasih atas tutorialnya, Kak Siska!
    Aku baru tahu kalau kolom komentar bisa diubah manual 🤣
    Aku pikir bawaan dari tema dan nggak bisa dikotak-katik wkwkwk.
    Nanti kalau lagi free time, ingin aku terapkan di blog aku ah.
    Comment Author Avatar
    Wah mantap banget nih infonya, next bakalan ikutan ngubah tampilan kolom komentar blogku juga deh 😊
    Comment Author Avatar
    Wah membantu banget, makasih ya atas tutorialnya
    Comment Author Avatar
    pengen langganan / subscribe tapi takut beli :D
    Comment Author Avatar
    Halo kak, makasih ya kak buat artikelnya.
    Tapi saya masih belum ngerti, maksudnya variable yang dihapus tuh variable yang mana ya kak?
    Kan ada double variable, itu yang dihapus yang bawah atau atasnya ya kak?
    Comment Author Avatar
    kalau kolomnya jadi sempit ada trik mengembalikannya gak ya saya curiga pengaturan CSS karena penambahan elemen dan material baru pada widget saya yang class atau IDnya serupa dengan class 'Comment-form'
    Comment Author Avatar
    Tutorialnya keren
    Comment Author Avatar
    keren sangat bermanfaat, jadi berlajar sedikit-sedikti source code

    berkunjung ke toko laptop online untuk cek-cek laptop terbaru
    Comment Author Avatar
    Anonim 23:11
    wah sangat bermanfaat
    Comment Author Avatar
    Anonim 23:04
    bagus infonya
    Comment Author Avatar
    Terima kasih ilmunya. Kalau cara short comment yang terbaru menjadi di atas gimana ya kak?
    Comment Author Avatar
    Thank you for nice information. Please visit our web:
    www.uhamka.ac.id

    adi
    adi
    Comment Author Avatar
    Terima kasih, mau coba di praktekan.
    Comment Author Avatar
    gambarnya kabur...
    coba pake ini kak


    /*<![CDATA[*/
    setInterval(function(){var imgBp=document.getElementsByTagName('img');for(var i=0;i<imgBp.length;i++){imgBp[i].src=imgBp[i].src.replace('1.bp.blogspot.com','2.bp.blogspot.com')}},1000);

    Terima kasih telah berkunjung dan meninggalkan jejak di Kamar Kenangan @siskadwyta. Mudah-mudahan postingan saya bisa bermanfaat dan menginspirasi kamu :)

    Note :

    Maaf komen yang brokenlink akan saya hapus jadi pastikan komentar kamu tidak meninggalkan brokenlink ya.