Ads Banner

Memperkecil Avatar Komentar dan Meringankan Blog

Memperkecil Avatar Komentar dan Meringankan Blog
Memperkecil Avatar Komentar dan Meringankan Blog

Alternative baru cara memperkecil ukuran avatar komentar blogger yang terbukti paling efektif dengan mengambil data dari (data-src) element div Alternative Baru Memperkecil Ukuran Avatar Komentar. Kemarin saya coba tes berat blog ini di gtmetrix.com ternyata berat blog ini membengkak sampai 980 kb coba cari-cari penyebabnya ternyata image avatar pada komentar. Padahal sebelumnya sudah saya pasang script untuk mengecilkan ukuran avatar komentar. Saya kira itu berhasil, soalnya ketika di inspect elemen ukuran natural avatar sama dengan ukuran avatar diblog ini. Tapi setelah saya cek di gtmetrix.com ternyata tidak ngefek sama sekali. Avatar yang termuat ukurannya kb nya masih sama besar dengan profil avatar aslinya.

Script yang pertama kali saya gunakan seperti ini :

var avatar=$("#comments");
avatar.find('.avatar-image-container img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s65-c/")).removeAttr('longdesc width height');
});

Bagi teman-teman yang memakai script seperti di atas coba tes ukuran blog anda menggunakan gtmetrix atau tools.pingdom.com. Saya ingin tahu apakah blog anda juga sama yang seperti blog ini alami atau cuma blog ini saja yang seperti itu dan bermasalah?

Sambil menunggu jawaban dari sobat semua? saya mencoba menggunakan alternative lain :

Alternative Lain Cara Memperkecil Ukuran Kb Avatar Komentar Blogger

1. Cari kode <div class='avatar-image-container vcard'> atau lebih lengkapnya yang mirip seperti ini

<div class='avatar-image-container'><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32' width='32'/>
    </div>

2. Menambahkan expr:data-src='data:comment.authorAvatarSrc' pada element a<div class='avatar-image container'> menjadi seperti ini.

<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>

3. Membungkus img seperti ini<noscript><img src=" .... "/></noscript>

4. Dari ketiga langkah di atas kurang lebih hasilnya menjadi seperti :

<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>
    <noscript>
        <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32px' width='32px' />
    </noscript>
</div>

5. Langkah terakhir adalah mengambil url dari data-src pada elemen <div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'> dengan menggunakan Script di bawah ini.

$(window).on("load", function () {
    $('.avatar-image-container').each(function () {
        $(this).html('<img width="50" height="50" src="' + $(this).data('src').replace(/\/s[0-9]+(\-c)?/,"/s50-c") + '"></img>');
    });
});

6. Simpan dan silahkan cek perbedaannya...

Apabila kode <div class='avatar-image-container vcard'> tidak ditemukan coba cari kode ini  <data:comment. authorAvatarImage/> Kemudian ganti dengan kode ini
<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>
    <noscript>
        <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32px' width='32px' />
    </noscript>
</div>
Perlu diingat untuk komentar balasannya biasanya harus di sesuaikan lagi kode ini (data:comment.authorAvatarSrc)

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar