Cara Mengatasi Komentar Zooming Saat Di Klik Pada Blogger
Komentar Zooming? Maksudnya apa?. Komentar Zooming adalah istilah yang saya buat sendiri yang dimaksudkan dengan komentar ngezoom saat diklik pada blogger.
Ini terjadi dikarenakan blogger sudah memperbarui elemen pada bingkai komentarnya, sedangkan skrip template kita masih menggunakan skrip lama.
Sebenarnya saya sudah menyadarinya sejak blogger menganti bingkai komentarnya, tetapi baru sempat memberikan tutorial untuk mengatasi hal tersebut dikarenakan request dari ilhamyas.
Saat pertama kali menyadarinya mungkin ada bug pada sistem blogger, tapi kok lama sekali fix bugnya. Setelah saya cari tahu ternyata memang dari blogger sendiri sudah mengganti kode bingkai miliknya dan kita sebagai usernya wajib mematuhi dengan cara mengganti skrip pada komentar.
Sebenarnya saya tidak 100% mengatasi hal tersebut, tetapi lebih tepatnya mengakali.
Cara ini hanya sementara saja, mungkin kedepannya blogger bakal memperbaiki ini semua dan dengan demikan cara ini tidak perlu dilakukan lagi.
Jadi saya mengakalinya dengan toogle css {touch-action:pan-x pan-y} yang nanti akan panggil classnya ke body untuk mematikan fungsi zoom pada browser dengan memanfaatkan javascript toggle class, jadi class tersebut nanti hanya akan kita panggil ketika ada aksi klik pada tombol buka dan tutup komentar.
Dengan demikan cara ini hanya berfungsi pada template yang memiliki fitur buka tutup komentar seperti Template Median UI salah satunya.
Skrip ini hanya bersifat sementara selagi blogger belum memperbaiki masalah ini.
Tutorial Cara Mengatasi Komentar Blogger ngeZoom
Pertama dan paing utama kalian masuk ke Dashboard blogger > Tema > Edit HTML
Lalu salin kode css di bawah ini dan tempelkan di atas kode ]]></b:skin> atau di atas kode </style>
body.antiZoom{touch-action:pan-x pan-y}
Kemudian salin kode javascript di bawah ini dan tempelkan di atas kode </body> atau di atas kode <!--</body>--></body>
<b:if cond='data:view.isSingleItem and data:blog.isMobileRequest'>
<script>//<![CDATA[
var zcmBtn = document.querySelectorAll('.cmZoom'); // tambahkan class (cmZoom) pada tombol buka tutup komentar kalian
for (var i = 0; i < zcmBtn.length; i++) {
var cmBtnCk = zcmBtn[i];
cmBtnCk.addEventListener('click', function() {
document.querySelectorAll('BODY')[0].classList.toggle('antiZoom');
});
}
// cek apakah url saat ini memiliki parameter (#comment)
if (window.location.href.indexOf('#comment') > -1) {
// jika ada add class (antiZoom)
document.querySelectorAll('BODY')[0].classList.add('antiZoom');
}
//]]>
</script>
</b:if>
Selanjutnya silahkan kalian tambahkan class cmZoom pada tombol buka tutup komentar template kalian masing-masing. Jika terdapat 2 atau lebih tombol buka tutup maka tambahkan semuanya.
Bagi Pengguna Template Median UI
Bagi user template Median-UI ikuti langkah-langkah di bawah ini.
Pertama cari kode dengan menekan huruf CTRL + F pada keyboard dan cari kode seperti di bawah ini.
<label class='cmnt' expr:data-text='data:post.numberOfComments' for='forComments'>
Ubah kode tersebut menjadi
<label class='cmnt cmzoom' expr:data-text='data:post.numberOfComments' for='forComments'>
Kemudian cari lagi code <div class='cmShw'> dan ubah menjadi
<div class='cmShw cmZoom'>
Kemudian cari lagi code <label aria-label='Close' class='c' for='forComments'/> dan ubah menjadi
<label aria-label='Close' class='c cmZoom' for='forComments'/>
Lanjut cari code <label class='fCls' for='forComments'/> dan ubah menjadi
<label class='fCls cmZoom' for='forComments'/>
Terakhir salin kode javascript di bawah ini dan tempelkan di atas kode </body> atau di atas kode <!--</body>--></body>
<b:if cond='data:view.isSingleItem and data:blog.isMobileRequest'>
<script>//<![CDATA[
var zcmBtn = document.querySelectorAll('.cmZoom'); // tambahkan class (cmZoom) pada tombol buka tutup komentar kalian
for (var i = 0; i < zcmBtn.length; i++) {
var cmBtnCk = zcmBtn[i];
cmBtnCk.addEventListener('click', function() {
document.querySelectorAll('BODY')[0].classList.toggle('antiZoom');
});
}
// cek apakah url saat ini memiliki parameter (#comment)
if (window.location.href.indexOf('#comment') > -1) {
// jika ada add class (antiZoom)
document.querySelectorAll('BODY')[0].classList.add('antiZoom');
}
//]]>
</script>
</b:if>
Ok jadi sekian Cara Mengatasi Komentar Zooming Saat Di Klik Pada Blogger yang bisa saya bagikan kali ini, jika kalian ada cara yang lebih baik dari ini boleh berbagi ilmunya juga di kolom komentarnya ya, terima kasih telah berkunjung dan semoga bermanfaat.
Referensi:
https://www.wendycode.com/2022/06/mengatasi-komentar-blogger-ngezoom-saat-diklik.html
Post a Comment