Membuat Auto Read More Ringan

Membuat Auto Read More Ringan

Sebenarnya sudah banyak yang membahas cara membuat auto read more dengan javascript ini. Tetapi perlu Anda ketahui, kebanyakan tutorial di luar sana masih menggunakan javascript yang hanya memanipulasi ukuran tinggi dan lebar thumbnailnya. Ingat memanipulasi, bukan mengurangi! sedangkan ukuran gambar yang diload masih tetap sama besarnya dan sama beratnya. Sehingga, hal ini dapat mempengaruhi loading blog Anda.

Script javascript yang saya maksud di atas, kira-kira kodenya seperti berikut ini :

<script type='text/javascript'>
var summary_noimg = 300,
summary_img = 250,
img_thumb_height = 100,
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[

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>

Coba Anda perhatikan pada bagian berikut ini :

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>';

Dari variabel di atas kita dapat mengetahui tautan gambar yang diambil atau diload dengan atribut img[0].scr merupakan tautan dari gambar pertama pada postingan terkait (asli). Yang merubah ukuran gambar tersebut untuk ditampilkan pada thumbnail adalah atribut img_thumb_width dan img_thumb_height. Jadi, ukuran tinggi dan lebar gambar tersebut hanya sebuah manipulasi sehingga menjadi 100 x 100 piksel (nilainya ada pada variabel img_thumb_width dan img_thumb_height). Besar file gambarnya tetap sama!

Atau dapat Anda lihat pada contoh berikut ini (gambar di saat saya masih menggunakan javascript tersebut) :

Membuat Auto Read More Ringan

Ternyata thumbnail kecil yang Anda lihat sebagai gambar berukuran 208 × 158 piksel adalah gambar berukuran 400 × 216 piksel.

Lalu, bagaimana untuk memperkecil ukuran gambar tersebut secara nyata, dan bukan hanya sekedar memanipulasi ukuran lebar dan tinggi gambar menggunakan atribut width dan height?

Blogger memiliki cara yang unik dalam mengompres gambar. Mereka mengambil ukuran gambar dari URLnya, seperti kode-kode seperti /s200, /s400, /s1600,/s72-c dan yang lainnya. Kode-kode seperti itu dapat Anda lihat pada url gambar yang Anda upload di editor posting Blogger.

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):

Kode Ukuran Contoh URL
/s72-c Media Thumbnail (Ukuran Persegi) http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s72-c/319.jpg
/s200 Small http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s200/319.jpg
/s320 Medium http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s320/319.jpg
/s400 Large http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s400/319.jpg
/s640 X-Large http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s640/319.jpg
/s1600 Original Size http://lh5.googleusercontent.com/-hWRTW_pG0f0/UoY31oeAzWI/AAAAAAAAAGs/LnP6x4LPeOs/s1600/319.jpg

Semua gambar di atas sebenarnya memiliki tautan yang sama. Yang membedakan, hanya pada bagian yang berwarna kuning. Namun saat Anda mencoba mengecek tautan tersebut satu per satu, ternyata hanya dengan mengubah kode tersebut pada URLnya saja sudah bisa merubah ukuran gambarnya.

Nah jadi dari kemudahan yang diberikan Blogger, kita dapat memodifikasi sedikit pada javascript di atas untuk membuat auto read more yang menampilkan thumbnail dengan ukuran yang benar-benar sesuai keinginan kita, bukan memanipulasi. Pastinya, loading blog Anda akan lebih ringan dengan menggunakan javascript yang telah di modifikasi nanti, dibanding Anda menggunakan javascript di atas.

Cara memodifikasinya cukup sederhana. Kita cukup mengubah URL gambar yang tadinya berada di seputar /s200, /s400, /s1600,/s72-c dan yang lainnya menjadi URL baru dengan ukuran sesuai dengan yang telah kita tentukan (nilainya dapat Anda tentukan pada variabel img_thumb_width dan img_thumb_height) sehingga variabel imgtag nya menjadi seperti ini :

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

Mungkin sudah cukup tulisan panjang ini menjelaskan kepada Anda bahwa auto read more yang saya berikan ini sedikit berbeda dan lebih ringan dibanding auto read more dengan javascript yang lainnya.

Membuat Auto Read More Ringan

Silahkan ikuti langkah-langkah berikut ini untuk menerapkan auto read more dengan javascript yang sudah dimodifikasi :

1. Masuk ke Blogger > Template > Edit HTML
2. Silahkan letakkan kode javascript berikut ini di atas kode </head>

<script type='text/javascript'>
var summary_noimg = 300,
summary_img = 250,
img_thumb_height = 100,
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![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.replace(//s(72-c|200|320|400|640|1600)/, "/s" + img_thumb_width) + '" 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>

Keterangan :

summary_noimg = 300; Silahkan ganti 300 untuk menentukan jumlah huruf pertama yang akan ditampilkan jika artikel tanpa gambar.
summary_img = 250; Silahkan ganti 250 untuk menentukan jumlah huruf pertama yang akan ditampilkan jika artikel dengan gambar.
img_thumb_height = 100; Silahkan ganti 100 untuk menentukan ukuran tinggi gambar yang akan membentuk ukuran sekaligus tautan baru dari tautan gambar awal pada postingan terkait.
img_thumb_width = 100; Silahkan ganti 100 untuk menentukan ukuran tinggi gambar yang akan membentuk ukuran sekaligus tautan baru dari tautan gambar awal pada postingan terkait.

3. Kemudian, silahkan cari kode <data:post.body/> (jika lebih dari satu, silahkan pilih yang pertama). Jika sudah ketemu, silahkan hapus kode tersebut dan ganti dengan kode berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more</a>
</b:if>
</b:if>

4. Simpan template

Untuk Anda yang sudah menggunakan auto read more dengan javascript (yang hanya memanipulasi ukuran tinggi dan lebar thumbnailnya), Anda hanya perlu mengganti kode javascriptnya saja.

Sekian, semoga bermanfaat.

Leave a Reply