Mecha versi 2.6.4 sudah dirilis!

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

Tahunet

Sip, sudah terpasang dengan sempurna... \o/

Unknown

Mas maaf mau nyanya...saya punya blog banyak gambar thumbail..belum saya manipulasi gambarnya..jadi berat..saya bingung mau ikuti tutz di atas..agak beda cripts nya dengan saya..ini scripts saya=

http://tinascript.googlecode.com/files/bingung.txt

apa yang mesti saya tambah mas?..thanks..

Unknown

Terimakasih mas atas bantuan nya..saya udah coba dan sukses, sebelumnya gambar thumbnail saya 18KB sekarang udah jadi 3KB, terimakasih mas....

IRIL SAGITA

kak Taufik, aku terapkan begini kok gak berfungsi ya :

if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = imgBlank;
}
output += '<div class="iteminside"><a href="' + posturl + '" target="_blank"><img src="' + postimg.replace(/\/s(320|400|640|1600)/, "\/s400") + '" /></a></div>';

Tolong bantuannya ya kak ?

Taufik Nurrohman

Ini kode apa ya? Kode daftar isi? Coba seperti ini:

postimg = entry.media$thumbnail.url.replace(/\/s(320|400|640|1600)/, "\/s400");

IRIL SAGITA

Iya kak, itu kode daftar isi, dan cara itu sudah aku coba juga belum berhasil, apakah img harus dibuat original dl seperti ini :
var s, a, b, c, d;
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
postimg = ((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) ? d : imgBlank;

output += '<div class="iteminside"><a href="' + posturl + '" target="_blank"><img src="' + postimg.replace(/\/s(320|400|640|1600)/, "\/s200") + '" /></a></div>';

IRIL SAGITA

He he...., sudah berhasil kak, cara kedua kurang efisien, akhirnya aku pakek cara pertama seperti saran kak taufik, tetapi harus ditambah size img dari daftar isi, jadinya seperti ini :

if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = imgBlank;
}
output += '<div class="iteminside"><a href="' + posturl + '" target="_blank"><img src="' + postimg.replace(/\/s(72|100|320|400|640|1600)/, "\/s400") + '" /></a></div>';

Unknown

Mas, Penerapannya Gimana ? Saya Masih Bingung... 7:(

Unknown

Boleh Nanya Gak ? Ini Cara Masangnyanya Bagaimana ? Maklum masih pemula.... :p

Unknown

kalu mengatasi gambat di postthumb yang gambarnya hanya tampak sebagian gimana?? coba di lihat http://andronam.blogspot.com

Taufik Nurrohman

.cutter img {
width:100%;
height:100%;
max-width:100%;
max-height:100%;
}

Erma

misi gan saya kan pakai template ini> zikazevflat.blogspot.com
ente tau gak cara biar di home itu tampilannya jadi fullpost?
terimakasih

Syakir Rahman

Wah terimakasih banget mas sharenya.. saya nyari yang bisa mengecilkan ukuran gambar juga dan ternyata ketemu disini.. Sukses terus

Mus Lim

Asslamu`alaikum, Pak.

Autoreadmore-nya berhasil, Pak. Tapi kalao gambarnya s200 maka tidak sama sisi, gimana caranya biar gambarnya jadi s200-c , Pak.

Terimakasih sebelumnya.

Salam....

Taufik Nurrohman

Waalaikumsalam. Ganti bagian ini:

postimg.replace(/\/s(320|400|640|1600)/, "\/s" + thumbWidth)

dengan ini:

postimg.replace(/\/s[0-9]+(\-c)?/, "\/s" + thumbWidth + "-c")

Mus Lim

Alhamdulillah.

Terimakasih ya, Pak.

Sekarang auto readmore Saya semakin cepat karena image-nya sesuai ukuran.

Muhammad Iqbal K

mas, gimana caranya biar gambar thumbnail nya bisa diklik (supaya masuk ke full post) ? makasih.

Taufik Nurrohman

Harus tambah satu parameter lagi mas, untuk memanggil URL posting:

function createSummaryAndThumb(pID, url) {
…
imgtag = '<a href="' + url + '" style=" … "><img alt="" src=" … "></a>
}
<script>createSummaryAndThumb(&quot;post-<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);</script>

Muhammad Iqbal K

penempatannya dimana mas? saya coba taruh dibawah div.innerHTML = summary; malah eror..
}

Muhammad Iqbal K

mas udah bisa hehee, makasih mas, maaf nanya mulu :D

Wahyu

Mas saya ijin share ini yaa di blog saya, tapi dengan bahasa saya sendiri. Perkenalkan saya Wahyu Pratama pemilik blog Wahyu Pratama . Semoga diizinkan ya mas, kalau tidak nanti artikelnya saya hapus aja hehe. Terima kasih.