Membuat Lazy Load Pada Komentar Blogger

Membuat Lazy Load Pada Komentar Blogger - Kotak komentar / kolom komentar default di setiap blog adalah dg iframe dari bloggger, secara default selalu dimuat secara bersamaan saat halaman dimuat. Namun, karena waktu respons yang lama dari server blog adalah alasan utama mengapa halaman lebih lambat, ini membuat beberapa blogger ingin memberikan komentar blogger untuk mencari sistem komentar lain. Jadi adakah solusi untuk mengatasi masalah ini tersbut? Jawabannya akan disajikan dalam artikel ini..

Pendahuluan

Bentuk komentar pada v1 dan v2 tidak jauh berbeda, mereka hanya berbeda dari definisi b:includable yang dapat disertakan. Untuk membuat 1 iframe blogger menggunakan 4 komponen dasar. Ohh iya, penggunaan ini pernah saya lakukan ketika menggunakan blog Ensikology :D namun agak sedikit kacau pada saat itu, dan sekrang alasan menggunakan disqus karena saya merasa tidak ini adalah yg terbaik.

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>

Kode diatas biasanya ada dalam 2 bentuk komentar dan bentuk berulir komentar. Untuk blogger profesional, mereka biasanya akan menetapkan tag b:includable yang dapat disertakan dan memanggil untuk mengurangi duplikasi, meningkatkan ukuran template.

Kode di atas saat merender kode HTML akan memperoleh hasil sebagai berikut

<a href='https://www.blogger.com/comment-iframe.g?blogID=4820893236779245790&postID=6740072205591785673' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='xxx px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
     BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>

Pada dasarnya adlh membawa href dari tag ke iframe src untuk membuat kotak komentar. Jadi untuk dapat memuat lazy load iframe-nya Aurealisa akan mencoba menggunakan id scra onload dan href untuk tag.

Baca juga : 13 Cara Mempercepat Loading Blogger

Langkah Membuat Lazy Load Komentar Blogger

Langkah pertama silahkan cari yang sekiranya sperti dibawah ini.

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Kemudian hapus expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' sehingga tidak dapat membuat iframe, berikan class agar dapat ditransmisikan kembali dan contoh id yang saya atur adalah class='comment-editor-src'. Setelah menghapus dan menambahkan class untuk tag a akan sebagai berikut

<a class='comment-editor-src'/>

Selanjutnya kalo tdk salah saya dulu menghapus ini

<data:post.cmtfpIframe/>
<script type='text/javascript'>
  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>

Dan menggantinya dg kode berikut

<script type="text/javascript">
// Lazy load Komentar blog by Aurealisa
$(window).on(&quot;load&quot;,function(){
var df_if = &quot;<data:post.commentFormIframeSrc/>&quot;;
//<![CDATA[
$(".comment-editor-src").attr("href", df_if).attr("id","comment-editor-src");

// Tempel semua kode dari https://www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js samkpai di sini

//]]>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
});
</script>

Nah, sekarang silahkan simpan dan mengujinya untuk melihat apakah kecepatan blog telah lebih cepat daripada sebelumnya. semoga artikel tentang cara membuat lazyload pada komentar blog ini bermanfaat.

blogger tutorial