Ini yakni auto read-more link script yang biasa Anda gunakan untuk mengubah posting orisinil 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=" yang biasa Anda gunakan untuk mengubah posting orisinil menjadi ringkasan posting Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger" 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 ajaib dengan itu? Saya rasa tidak. Tapi bila Anda sedikit lebih jeli dan memasuki cara kerjanya lebih dalam, maka Anda akan mengerti beberapa hal:
- Pertama, script tersebut akan mengurangi jumlah huruf posting yang panjang menjadi lebih pendek sesuai dengan pengaturan pada variabel
summary_noimgdansummary_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 pola di atas ukurannya sanggup diketahui akan berkembang menjadi 120 × 100 piksel (nilainya ada pada variabel
img_thumb_widthdanimg_thumb_height).
Itu berarti bahwa bila kita menerapkan fitur auto-readmore-link pada blog kita, maka kita sanggup mempercepat proses muat halaman blog, alasannya yakni kita pikir kita telah mengubah paragraf posting yang panjang menjadi lebih pendek. Dan bahkan, ukuran gambar telah diperkecil menjadi 120 × 100 piksel.
Tapi kenapa ketika Anda mencoba mencicipi proses muat halaman blog Anda rasanya tidak ada perbedaan yang terlalu jauh antara kecepatan muat posting yang orisinil 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 arahan sumber dari halaman blog Anda, maka Anda akan melihat bahwa keseluruhan isi posting bekerjsama masih tetap ada pada tempatnya dan ditransfer secara penuh. JavaScript bertugas untuk mengambil beberapa huruf saja dan menampilkannya dalam bentuk ringkasan. Sementara posting yang orisinil 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 sanggup kita lakukan dengan ringkasan posting. Yang sanggup kita lakukan hanyalah mengoptimasi ukuran thumbnail. Perlu diketahui bahwa meskipun ukuran gambar pada posting read-more Anda sudah menjadi lebih kecil dari sebelumnya, tapi bekerjsama 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 yakni 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 memakai atribut width dan height?
Picasa mempunyai cara yang unik dalam mengompres gambar. Mereka mengambil ukuran gambar dari URLnya (yaitu kode-kode menyerupai /s200, /s400, /s1600, /s40-c dan yang lainnya). Dari path itulah Picasa akan mentransfer ukuran gambar dengan resolusi sesuai dengan arahan ukuran yang tercantum.
Blogger memakai akomodasi yang sama, jadi kita sanggup memakai kunci sederhana itu untuk memperkecil gambar. Berikut ini yakni beberapa pola ukuran bawaan dari editor posting pada Blogger menyerupai Small, Medium, Large, X-Large dan Original Size (Tapi bekerjsama Anda juga masih sanggup memilih ukurannya sendiri):
Semua tautan gambar di atas bekerjsama sama. Saya hanya membedakan pada bab yang berwarna jingga. Namun ketika Anda mencoba mengeceknya, ternyata hanya dengan mengubah URL tersebut saja sudah sanggup memperkecil ukuran gambar. Pada awalnya Saya sempat berpikir bahwa ketika kita mengunggah gambar ke Picasa, maka Picasa akan menyimpan semua gambar yang sama tersebut dalam banyak sekali ukuran ke dalam folder berjulukan 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 mempunyai ukuran gambar yang berbeda-beda, bagaimana kita sanggup 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 menyerupai ini:
imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt=" yang biasa Anda gunakan untuk mengubah posting orisinil menjadi ringkasan posting Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';dan supaya pengaturan ukuran menjadi jauh lebih mudah, lebih baik set huruf pengganti menurut variabel lebar thumbnail:
imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt=" yang biasa Anda gunakan untuk mengubah posting orisinil menjadi ringkasan posting Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger" 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 sanggup diperkecil hingga dua kali lipatnya. Bahkan lebih!
Saran Saya untuk Developer Blogger
Meskipun goresan pena panjang ini hanya membicarakan seputar thumbnail auto read-more link blogspot, tapi bekerjsama bukan itu inti dari apa yang ingin Saya sampaikan. Jika Anda yakni seorang pembuat widget Blogger, Saya harap Anda bersedia untuk memulai mengubah sedikit cara Anda memperkecil gambar. Ini yakni saran terbaik dari Saya. Jika Anda membuat 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 sanggup 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=" yang biasa Anda gunakan untuk mengubah posting orisinil menjadi ringkasan posting Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger" />');Mengenai ringkasan posting, Saya harap suatu ketika nanti Blogger akan merilis tag <data> khusus untuk memanggil ringkasan posting, sama menyerupai 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 membuat posting read-more. Yang perlu kita lakukan hanyalah sesuatu yang sederhana menyerupai 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 mempunyai tag <data> yang sanggup menampilkan ringkasan posting meski jumlahnya masih sangat terbatas:
<data:post.snippet/>Elemen ini bekerjsama lebih sering kita jumpai pada widget Posting Populer yang biasa dipakai untuk menampilkan ringkasan pendek di sekitar thumbnail. Selengkapnya mengenai implementasi auto read-more tanpa JavaScript dengan memanfaatkan tag <data:post.snippet/> sanggup Anda baca pada salah satu posting dari seseorang di Vietnam » Auto readmore không s? d?ng javascript cho Blogger
Ikon: ArtDesigner
Sumber https://www.dte.web.id/