Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger

Tabel Konten
  1. JavaScript Hanya Memanipulasi, Bukan Mengurangi 
  2. Saran Saya untuk Developer Blogger 
    1. Konsepnya kira-kira begini: 

Ini adalah auto read-more link script yang biasa Anda gunakan untuk mengubah posting asli menjadi ringkasan posting:

<script>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 100,
    img_thumb_width  = 120;
</script>
<script>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join(" ");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

Merasa ada yang aneh dengan itu? Saya rasa tidak. Tapi jika Anda sedikit lebih jeli dan memasuki cara kerjanya lebih dalam, maka Anda akan mengerti beberapa hal:

  • Pertama, script tersebut akan mengurangi jumlah karakter posting yang panjang menjadi lebih pendek sesuai dengan pengaturan pada variabel summary_noimg dan summary_img
  • Ke dua, script tersebut akan menampilkan sebuah gambar mini/thumbnail yang diambil dari gambar pertama pada posting terkait. Ukurannya juga berubah, menjadi lebih kecil. Dalam contoh di atas ukurannya dapat diketahui akan berubah menjadi 120 × 100 piksel (nilainya ada pada variabel img_thumb_width dan img_thumb_height).

Itu berarti bahwa jika kita menerapkan fitur auto-readmore-link pada blog kita, maka kita dapat mempercepat proses muat halaman blog, karena kita pikir kita telah mengubah paragraf posting yang panjang menjadi lebih pendek. Dan bahkan, ukuran gambar telah diperkecil menjadi 120 × 100 piksel.

Tapi kenapa saat Anda mencoba merasakan proses muat halaman blog Anda rasanya tidak ada perbedaan yang terlalu jauh antara kecepatan muat posting yang asli dengan versi yang sudah diringkas?

JavaScript Hanya Memanipulasi, Bukan Mengurangi 

Script auto read-more link tidak mengurangi ukuran file posting, tapi hanya memanipulasi tampilannya pada pandangan mata. Jika Anda melihat kode sumber dari halaman blog Anda, maka Anda akan melihat bahwa keseluruhan isi posting sebenarnya masih tetap ada pada tempatnya dan ditransfer secara penuh. JavaScript bertugas untuk mengambil beberapa karakter saja dan menampilkannya dalam bentuk ringkasan. Sementara posting yang asli akan ditindih dengan ringkasan yang telah dibuat:

// Menyisipkan summary (duplikat/clone posting yang telah dimanipulasi)
// ke dalam posting dengan ID yang diambil dari <data:post.id/>
var div = document.getElementById(pID);
...
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
...div.innerHTML = summary;

Sejauh ini tidak ada yang bisa kita lakukan dengan ringkasan posting. Yang bisa kita lakukan hanyalah mengoptimasi ukuran thumbnail. Perlu diketahui bahwa meskipun ukuran gambar pada posting read-more Anda sudah menjadi lebih kecil dari sebelumnya, tapi sebenarnya yang berubah hanya ukuran tinggi dan lebarnya saja, sedangkan ukuran gambar masih tetap sama besarnya dan sama beratnya. Coba Anda klik kanan pada salah satu thumbnail posting kemudian klik View Image Info:

View Image Info
Menampilkan info gambar

dari situ Anda akan melihat ukuran gambar aslinya, bukan hanya ukuran lebar dan tinggi gambar asli, tapi juga ukuran file dari gambar tersebut:

Lebih Besar
Ukuran gambar jauh lebih besar dari yang terlihat

NAH! Ternyata thumbnail kecil yang Anda lihat sebagai gambar berukuran 120 × 100 piksel adalah gambar berukuran 495 × 371 piksel. Dan bukan itu saja, coba lihat pada file size: 24.75KB! Untuk ukuran gambar sebesar itu, kenapa harus dipaksakan menjadi berukuran 120 × 100? Lalu, bisakah kita memperkecil ukuran gambar tersebut secara nyata, dan bukan hanya sekedar menekan ukuran lebar dan tinggi gambar menggunakan atribut width dan height?

Picasa memiliki cara yang unik dalam mengompres gambar. Mereka mengambil ukuran gambar dari URLnya (yaitu kode-kode seperti /s200, /s400, /s1600, /s40-c dan yang lainnya). Dari path itulah Picasa akan mentransfer ukuran gambar dengan resolusi sesuai dengan kode ukuran yang tercantum.

Blogger menggunakan fasilitas yang sama, jadi kita bisa menggunakan kunci sederhana itu untuk memperkecil gambar. Berikut ini adalah beberapa contoh ukuran bawaan dari editor posting pada Blogger seperti Small, Medium, Large, X-Large dan Original Size (Tapi sebenarnya Anda juga masih bisa menentukan ukurannya sendiri):

KodeUkuranContoh URL
/s72-cMedia Thumbnail (Ukuran Persegi)http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s72-c/319.jpg
/s200Smallhttp://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s200/319.jpg
/s320Mediumhttp://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s320/319.jpg
/s400Largehttp://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s400/319.jpg
/s640X-Largehttp://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s640/319.jpg
/s1600Original Sizehttp://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s1600/319.jpg

Semua tautan gambar di atas sebenarnya sama. Saya hanya membedakan pada bagian yang berwarna jingga. Namun saat Anda mencoba mengeceknya, ternyata hanya dengan mengubah URL tersebut saja sudah bisa memperkecil ukuran gambar. Pada awalnya Saya sempat berpikir bahwa saat kita mengunggah gambar ke Picasa, maka Picasa akan menyimpan semua gambar yang sama tersebut dalam berbagai ukuran ke dalam folder bernama s200, s400 dan seterusnya. Tapi semua orang tahu bahwa Google tidak sebodoh itu » https://developers.google.com/speed/docs/best-practices/payload#ScaleImages

Posting blog kita memiliki ukuran gambar yang berbeda-beda, bagaimana kita bisa memperkecil ukuran thumbnail tanpa harus memperkecil ukuran gambar pada posting?

Caranya sederhana. Kita cukup mengubah URL thumbnail yang tadinya berada di seputar /s400, /s640 dan /s1600 menjadi ukuran yang lebih kecil seperti ini:

imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';

dan agar pengaturan ukuran menjadi jauh lebih mudah, lebih baik set karakter pengganti berdasarkan variabel lebar thumbnail:

imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';

Dengan cara di atas maka ukuran thumbnail bisa diperkecil sampai dua kali lipatnya. Bahkan lebih!

Gambar sudah mengecil
Ukuran gambar mengecil sampai 2 kali lipat

Saran Saya untuk Developer Blogger 

Meskipun tulisan panjang ini hanya membicarakan seputar thumbnail auto read-more link blogspot, tapi sebenarnya bukan itu inti dari apa yang ingin Saya sampaikan. Jika Anda adalah seorang pembuat widget Blogger, Saya harap Anda bersedia untuk memulai mengubah sedikit cara Anda memperkecil gambar. Ini adalah saran terbaik dari Saya. Jika Anda menciptakan widget dengan ukuran lebar dan tinggi thumbnail yang telah diset di dalam variabel, jangan lupa juga untuk menerapkan variabel tersebut sebagai pengganti URL gambar, sehingga kecepatan muat gambar pada widget juga bisa ditingkatkan:

var thumbWidth  = 200,
    thumbHeight = 100;

// Kode widget Anda....
document.write('<img src="' + postimg.replace(/\/s(320|400|640|1600)/, "\/s" + thumbWidth) + '" width="' + thumbWidth + '" height="' + thumbHeight + '" alt="thumbnail" />');

Mengenai ringkasan posting, Saya harap suatu saat nanti Blogger akan merilis tag <data> khusus untuk memanggil ringkasan posting, sama seperti halnya dalam pembagian opsi feed yang sudah ada.

Konsepnya kira-kira begini: 

Feed Blog

Dengan begitu kita tidak perlu lagi repot-repot menuliskan JavaScript yang rumit untuk menciptakan posting read-more. Yang perlu kita lakukan hanyalah sesuatu yang sederhana seperti ini:

<article class='post-body entry-content'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <div expr:id='data:post.id'><data:post.bodySummary/>      </div>
      <div class='alignright'>
        <a class='read-more' expr:href='data:post.url' rel='dofollow'>READ MORE</a>
      </div>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    </b:if>
  </b:if>
  <div class='clear'/>
</article>

Pembaharuan: 28 April 2012

Blogger sudah memiliki tag <data> yang bisa menampilkan ringkasan posting meski jumlahnya masih sangat terbatas:

<data:post.snippet/>

Elemen ini sebenarnya lebih sering kita jumpai pada widget Posting Populer yang biasa digunakan untuk menampilkan ringkasan pendek di sekitar thumbnail. Selengkapnya mengenai implementasi auto read-more tanpa JavaScript dengan memanfaatkan tag <data:post.snippet/> dapat Anda baca pada salah satu posting dari seseorang di Vietnam » Auto readmore không s? d?ng javascript cho Blogger


Ikon: ArtDesigner

74 Komentar

  • Unknown

    oh pantes mungkin kenapa home-page di blogku terasa berat dibuka. Aku sudah coba, tapi belum tahu apakah ada efek sampingnya atau tidak. Soalnya script readmore yang ada di templateku beda sih

  • Putra

    kalau saya enakan dibungkus tag kondisional ^_^ gak ngeberatin bgt.

  • Taufik Nurrohman

    @Mivt elRahman Asalkan menaruh .replace() tepat di samping variabel URL gambar (yang ada di dalam atrbut src, Saya rasa tidak apa-apa.

  • Taufik Nurrohman

    @Alam Perwira Masalahnya script ini mengambil isi dari posting untuk dijadikan ringkasan, jadi kalau elemen <data:post.body/> dicabut memakai tag kondisional, post-summary bakalan ngeblank! :waaa:

  • Unknown

    Bang sekalian donk, kasi gambar pada posting yang gak punya gambar, biar rapi smua gitu

  • Taufik Nurrohman

    @system of blog Oh, kalau itu tinggal dikasih else statement saja:

    if (img.length >= 1) {
    imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
    summ = summary_img;
    } else {
    imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="URL-GAMBAR-KOSONG.jpg" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
    summ = summary_noimg;
    }
  • Unknown

    @Taufik Nurrohman oh ok deh

  • Unknown

    @Taufik Nurrohman sip deh bang thanks.

    Bang aku sekalian nanya nih, gimana caranya menghapus kata2 tertentu di dalam suatu div, misalnya gini

    <div id='bos'>
    Disini kalimat yang sangat banyak dan saya pengen menghapus kata http://blogger.com saja
    <div>

    Nah saya pengen ngapus http://blogger.com saja dan yang lain gak terhapus bisa gak....?

  • Taufik Nurrohman

    @system of blog Bisa. Untuk versi biasa seperti ini: http://jsfiddle.net/tovic/NJDJD/

    Untuk versi JQuery tampak lebih masuk akal:

    $('#bos').html(
    $('#bos').html().replace(/http:\/\/blogger.com/ig, "");
    );
  • Putra

    @Taufik Nurrohman ngeblank, hilang dipagesource halaman homepagekan mas?? loadnya kayak kilat entar :D

  • Unknown

    @Taufik Nurrohman Oh iya bang tapi saya mau setiap kata yang di awali dengan http:// itu terhapus, gimana caranya.

  • Taufik Nurrohman

    @Alam Perwira Iya, tapi thumbnail juga bakalan hilang, soalnya thumbnail juga masuk ke dalam <data:post.body/> T_T

    [note]Terkait: Format Posting Hanya Tampil Judul[/note]

  • Taufik Nurrohman

    @system of blog Saya mengambil pattern regex yang Saya ambil dari posting ini: Ubah Semua Teks URL menjadi URL Aktif
    Lalu Saya gunakan sebagai pendeteksi. Kalau regex menemukan karakter yang terdeteksi sebagai teks URL, hapus URL tersebut:

    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    $('#bos').each(function() {
    $(this).html($(this).html().replace(exp, ""));
    });

    Demo: http://jsfiddle.net/tovic/NJDJD/2/

  • Unknown

    @Taufik Nurrohman Thanks bang aku langsung coba

  • Unknown

    @system of blog bang aku udah pakein tag script dan pnutup script tapi kok gak mau bekerja ya apa aku salah cara ya. . .?

  • Taufik Nurrohman

    @system of blog Jangan lupa diletakkan di dalam $(function() { ... });
    Dan juga, ada yang error di blogmu:

    "script" element between "head" and "body"

    Maksudnya begini:

    ...
    </head>
    <script type='text/javascript'> ... </script>
    <body>
    ...

    Padahal seharusnya begini:

    ...
    <script type='text/javascript'> ... </script>
    </head>
    <body>
    ...
  • Taufik Nurrohman

    @system of blog NB: Sebenarnya kalau memakai ID tidak perlu memakai .each(), tapi siapa tahu itu mau digunakan untuk elemen-elemen komentar yang notabene lebih dari satu:

    $('.comment').each(function() {
    ...
    ...
    ...
    });
  • Unknown

    @Taufik Nurrohman OK bang Masalah Dah Clearrr Aku mau posting tentang script yang aku sering tanyain. izin dulu entar pasti ada credit nya :)

  • Unknown

    @system of blog Bang CaraQ Gabungin Jquery di blog itu udah bener gak, Ada tuh scriptnya beda2 fungsi aku gabungin, tapi normal2 aja sih cuman mau nanya aja bener enggak siapa tau salah. soalnya aku gabunginnya gak sama seperti yang sampean bilang di fb

  • Taufik Nurrohman

    @system of blog Sudah betul. Sudah nggak ada warna merahnya :-d

  • Unknown

    @Taufik Nurrohman Bagus deh kalau begitu :)

  • Unknown

    @system of blog Balik lagi aku mau nanya hehe aku kan bikin suatu div dengan panjang 500px nah dengan jquery aku pendekin menjadi 200px dengan tambahan scroll biar isi di dalamnya bisa di scroll tapi saat menggulung menjadi pendek efeknya gak smooth, langsung slat kayak kilat langsung pendek aku pengen perlahan - lahan div itu pendeknya tapi aku gak nemu solusinya :D udah sempat nyoba tapi gak bisa, maksud saya kalau pakai .animate kan smooth tapi kok untuk membuat scroll nya muncul gimana aku bingung

  • Taufik Nurrohman

    @system of blog Kalau scroll-barnya tidak perlu memakai JQuery. Pakai CSS saja sudah cukup. Mungkin maksudnya begini ya?

    Demo: http://jsfiddle.net/tovic/NJDJD/3/

  • Unknown

    @Taufik Nurrohman iya sih bang memang bisa lewat css tapi bisa gak kalau lewat jquery nya sendiri. . .?

  • Taufik Nurrohman

    @system of blog
    $('div').css('overflow', 'auto');

    Ujung-ujungnya tetap ke CSS.

  • Unknown

    @Taufik Nurrohman Ya memang lewat css bang tapi maksudnya nulisnya langsung di jquery gitu, tapi waktu itu aku coba gak mempan mungkin aku salah tulis kali ya

  • arimjie blog

    mas kok punyaku gak ada perubahan, size thumnail imagenya masih tetep yang aslinya...

  • Taufik Nurrohman

    @arimjie blog Kemungkinannya ada dua: Pertama, gambar-gambar yang ada di dalam posting tidak diupload menggunakan fasilitas dari Blogger (alias: mengambil gambar dari situs lain atau menggunakan penginangan gambar pihak ke tiga seperti Photobucket dan Imageshack).
    Ke dua, mungkin variabel lebar gambar pada script auto read-more di blogmu bukan berupa img_thumb_width

    Kalau masih bingung tentang bagaimana cara menemukan variabel ukuran lebar gambar, lebih baik gunakan karakter pengganti mutlak seperti ini:

    img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200")

    Kode di atas akan mengubah semua ukuran gambar standar Blogger, dari ukuran 320, 400, 640 dan 1600+ menjadi 200 piksel :W

  • artimes

    maksih mas, ternyata mesti diupload dengan fasilitas uploader dari blogger, saya gunakan windws live writer untuk nulis postingan.. yang media uploadnya pakai picasa,,,

    mas btw blognya keren banget... betah nongkrong di sini...

  • Unknown

    @arimjie blog waduh ketemu Arimje di sini, salam kenal sob....

  • Eksi Romiasih

    Bro.. Bisa nggak auto redmore di setting kalau misalnya dengan kode tertentu maka auto redmore disable jadi kalau kode tertentu tersebut dipasang pada post maka post tersebut akan ditampilkan full. bisa nggak?

  • Taufik Nurrohman

    @Eksi Romiasih Nggak perlu pakai JavaScript mas, pakai Jump Link saja...

  • Ijal Fauzi

    Wohhh, mantap sip gambarku sampe jadi 2kb mas, hahaha :D

  • Unknown

    mas kalau read more yang postingan awal gambarnya lebih besar gimana ya ?

  • Waff

    cara membuat readmore seperti smashingmagazine gimna yah...?
    yang tanpa pakai pengaturan pada post-thumbnail nya,,,,
    Please help,,,,, :)

  • Unknown

    Mas Kalo Kodenya Kaya gini gimana gantinya replace('loading', '')
    ???

  • Taufik Nurrohman

    @Nuer Arief Buat apa tuh??

  • Unknown

    @Taufik Nurrohman Maksudnya Kode yang kaya Gini img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") nda ada bang... gimana niee??? tolong dong..

  • Taufik Nurrohman

    @Nur Arif Intinya cari saja variabel yang ada di dalam atribut src pada gambar. Bentuknya bisa macam-macam:

    var taufik = '<img src="' + nurrohman[0].replace(/\/s(320|400|640|1600)/, "\/s200") + '" alt="" />';
  • Unknown

    mau tanya nih mas, kalo mau nyisipin attribut width sama height di foto widget followers itu gimana ya mas? apakah bisa dengan memakai js di atas?

  • Taufik Nurrohman

    Widget Followers tidak bisa diedit.

  • Unknown

    ouh ya mengenai readmore.. klo menyisipkan gambar hanya pada postingan pertama.. dan postingan yang dahulu gambarnya tersembunyi gimana.. contoh pada blog

    www.fiveforblogger.com

  • Taufik Nurrohman

    Kurang tahu. Kapan-kapan Saya cari tahu.

  • Biyan Pas.

    Load <data:post.body/> bisa dikurangi dengan menggunakan jump-break :-bd

  • Anonim

    mas kalo di blog saya bisa ga nambahin image post di setiap post yang kotak2 kecil?

  • Unknown

    mas taufik klw rubah src yg model gini gimana ya,,udah coba nga bisa??
    ini model src yg saya temuin mas

    indexOf('src="',a)
    <img alt="'+g+'" title="'+g+'" src="'+img[o],,,</i>

    tulung ya mas,,soalnya jadi ke load utuh satu gambar,,,jadinya berat banget :(
    nih sourcenya mas
    _http://nonaventa.googlecode.com/files/ModsLabels.js

    makasih sebelumnya :)

  • Unknown

    hehehe,,,udah mas taufik, udah bisa,,ternyata saya yang kurang teliti,,, :-bd

  • Limit Komputer

    Rumit dan Sulit bnget tutorial

  • Eksi Romiasih

    Aku cewek mas....

  • Unknown

    Pada JS diatas, supaya thumbnail nya menjadi link yang mengarah ke postingan itu sendiri gimana kang? soalnya kalau pake script di atas thumbnailnya ga bisa di klik

Komentar telah ditutup.