Sepertinya Pemblokir Iklan Anda Aktif
Maaf, Sayangnya blog ini tidak bisa hidup tanpa bantuan dari iklan.
Mohon nonaktifkan terlebih dahulu Pemblokir iklan (misal: Adblock) khusus untuk blog ini.
Setelah Anda menonaktifkan AdBlock, silahkan reload halaman ini.
Terima Kasih, semoga anda selalu dimudahkan pada setiap usaha, serta semoga Tuhan menambah kualitas kesehatan anda sekeluarga.

Jabat tangan
FaRo.

Artikel memiliki banyak komentar terkadang membuat blog semakin berat loadingnya, ini karena dimensi avatar diperkecil hanya pada html saja, tidak pada sumbernya, nah kali ini faro berbagi cara optimasi dimensi sumber gambar avatar menjadi lebih kecil.

Sebagai live preview bisa dilihat di beberapa artikel blognafaro yang memiliki komentar. Seperti gambar dibawah ini, foto avatar tidak muncul sampai seluruh elemen halaman terlihat, tetapi tidak harus menunggu sampai status loading halaman selesai karena kali ini saya menggunakan jQuery DOM Ready.
Contoh Optimasi Avatar Komentar Blogger

Baiklah langkah - langkahnya adalah mengganti elemen avatar di template, meletakkan kode 
CSS, meletakkan kode Javascript lalu simpan template.

Mengganti elemen Template.
Buka Template editor, kemudian cari kode berikut : data:comment.authorAvatar
anda mungkin akan menemukan kode yang mirip dengan ini
<img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
atau kode ini
<data:comment.authorAvatarImage/>
jika telah ditemukan, hapus kode tersebut dan ganti dengan kode berikut ini
<div class='avatar_image_container' expr:data-alt='data:comment.author' expr:data-src='data:comment.authorAvatarSrc' expr:data-title='data:comment.author' style='height:50px;width:50px'><noscript><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='50' width='50'/></noscript></div>

Meletakkan kode CSS
baiklah selanjutnya adalah meletakkan kode CSS agar tampilan semakin menarik, copy paste kode berikut di template anda, letakkan sebelum tag </head>
<style type='text/css'>.avatar_image_container img{background:#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjvJF6eWzLJuxeGndNU3G5KrlfnNZ3WFOu77m0S3jzb8tZiK4ctbAeTjdNSZgwZwTimKd9nn0oroFXRQU1_sb7ndVXvCoxga7aZypHfU-avsK9XroZaEfyBbX__eS1MEs3lrHXQfrFPQ/s1600/anim_loading_sm_082208.gif") no-repeat center center;} </style>

Meletakkan kode Javascript
Setelah kode CSS, sekarang meletakkan kode Javascript agan trik ini berjalan , copy paste kode berikut ini, letakkan sebelum tag </body>
<script type='text/javascript'> //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></scr" + "ipt>");
}    //]]>
       </script>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function () { $('.avatar_image_container').each(function () {        $(this).html('<img width="50" height="50" src="' + $(this).data('src').replace(/\/s[0-9]+(\-c)?/,"/s50-c") + '" alt="' + $(this).data('alt') + '" title="' + $(this).data('title') + '"></img>');    }); });
         //]]></script>
Setelah itu simpan template anda dan lihat perbedaannya.. :)
Semoga Bermanfaat.

Post link : http://www.blognafaro.com/2013/12/optimasi-dimensi-gambar-avatar-komentar-blogger.html

Optimasi Dimensi Gambar Avatar Komentar Blogger

Optimasi Dimensi Gambar Avatar Komentar Blogger
Ringkasan : Artikel memiliki banyak komentar membuat blog semakin berat loadingnya karena dimensi avatar diperkecil hanya pada html saja, tidak pada sumbernya, nah ini cara optimasi dimensi sumber gambar avatar menjadi lebih kecil. .
Jumlah Kata : | Dipublikasikan pada Wednesday, December 25, 2013

8 comments

salam kenal, thx sharingx sob! *smile

salam kenal juga pak Rohis Facebook.. :D

aduh gan pusing nih panjang bener yh tipsnya
Salam kenal gan

Tips ini berlaku untuk child comment jg ga mas?

iya mas, untuk child comment juga :)

Sudah saya praktekan, tapi gambarnya jadi gak ketengah sob (p)

untuk posisi gambar bisa diatur melalui css, tergantung template agan. :)

 
Top