Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger
Tabel Konten
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
dansummary_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
danimg_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:
dari situ Anda akan melihat ukuran gambar aslinya, bukan hanya ukuran lebar dan tinggi gambar asli, tapi juga ukuran file dari gambar tersebut:
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):
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!
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:
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 == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<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 == "item"'>
<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..
Taufik Nurrohman
Cari bagian-bagian ini:
Ganti dengan ini:
/2012/07/beberapa-pola-regex-bermanfaat.html?showComment=1365612431759#c5727483486533359564
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 :
Tolong bantuannya ya kak ?
Taufik Nurrohman
Ini kode apa ya? Kode daftar isi? Coba seperti ini:
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 :
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
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:
dengan ini:
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:
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.
Taufik Nurrohman
Boleh.
Irfan Muhammad Ghani
mas bikin komentar yang bisa disembunyiin gitu gimana ? :D