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.
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[Setelah itu simpan template anda dan lihat perbedaannya.. :)
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>
Semoga Bermanfaat.
Post link : http://www.blognafaro.com/2013/12/optimasi-dimensi-gambar-avatar-komentar-blogger.html
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
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
sipp thank you infonya ...
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. :)