Cara menggunakan RESIZED di JavaScript

Question

Ditulis oleh. Adhy Suryadi

Ditulis pada. 6/23/2016

Gambar adalah salah satu pendukung untuk membuat postingan lebih menarik untuk dibaca atau untuk lebih menjelaskan artikel. Namun gambar juga menjadi salah satu penyumbang masalah loading blog

Makanya jangan asal-asalan dalam membuat gambar untuk di posting. Buatlah gambar yang memiliki kualitas yang baik agar dapat dilihat dengan jelas oleh pembaca dan juga memiliki ukuran yang cukup kecil agar tidak membebani loading blog

Atau jika tidak ingin gambar menghambat loading blog, kita bisa menggunakan cara penangguhan gambar dengan javascript. Misalnya gambar animasi di bawah berukuran 358KB, namun dengan ditunda, waktu loading tidak terasa berat

Nah jika artikel Blogger ada gambar di postingannya, maka Blogger akan menampilkan thumbnail postingan dari gambar di postingan tersebut, jika ada beberapa gambar maka thumbnail akan diambil dari gambar pertama di postingan tersebut.

Dan baru-baru ini Blogger merilis fitur baru yaitu


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

3 yang dapat mengubah ukuran gambar Blogger dengan mudah

Ini pertama kali diperhatikan dalam perubahan kode untuk menampilkan thumbnail pada widget posting populer. Sebelumnya untuk


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

_4 pada thumbnail populer postingan tersebut terlihat seperti di bawah ini


expr:src='data:post.thumbnail'

Dan hasilkan URL gambar seperti di bawah ini sebagai contoh


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

Dan sekarang


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

4 pada thumbnail populer dari postingan tersebut terlihat seperti di bawah ini


expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'

Dan hasilkan URL gambar seperti di bawah ini sebagai contoh


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/w72-h72-p-nu/windows-10.png

_
Dari kedua URL gambar diatas yang dihasilkan akan menampilkan gambar dengan ukuran yang sama, hanya berbeda pada


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

6 dan


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

7

Namun untuk kode


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

_3 terbaru dari Blogger ini kita dapat dengan mudah mengubah ukuran thumbnail dengan mengganti angka sesuai dengan kebutuhan kita. Misalnya kita ingin menampilkan thumbnail dengan ukuran 300px, maka kodenya akan terlihat seperti di bawah ini


expr:src='resizeImage(data:post.thumbnail, 300, &quot;1:1&quot;)'

Maka akan muncul thumbnail dengan ukuran 300px x 300px persegi

Namun jika anda senang dengan tampilan thumbnail dengan tampilan full image seperti aslinya, maka silahkan tulis seperti ini


expr:src='resizeImage(data:post.thumbnail, 300)'

Maka URL gambar akan terlihat seperti di bawah ini sebagai contoh


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/w300/windows-10.png

Nah, ini juga berguna untuk mengubah ukuran thumbnail Blogger untuk


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

9 Blogger yang digunakan pada thumbnail widget Featured Post Blogger, bisa juga. Widget ini menggunakan kode di bawah ini


expr:src='data:postFirstImage'

Dan URL dari gambar yang dihasilkan akan terlihat seperti di bawah ini sebagai contoh


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s1600/windows-10.png

Agar ukuran thumbnail Featured Post sesuai dengan ukuran tempat penyimpanan widget ini, maka kita bisa menggunakan


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

3 seperti pada widget popular post. Misalnya widget posting unggulan ini disimpan di sidebar dengan lebar 300px, maka Anda dapat menggunakan kode berikut


expr:src='resizeImage(data:postFirstImage, 300)'

Sehingga URL dari gambar yang dihasilkan akan terlihat seperti di bawah ini sebagai contoh


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/w300/windows-10.png

Perubahannya bisa dilihat dari animasi GIF di bawah ini

Trik ini juga bisa digunakan untuk kode yang menampilkan thumbnail blogger di luar postingan atau untuk menampilkan thumbnail postingan di beranda seperti ini


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

_1
Dan silahkan gunakan kode dibawah ini untuk resizeImage dengan ukuran 600px


https://1.bp.blogspot.com/-oufJ38rkn8Q/VGMFsq9lvyI/AAAAAAAAeKo/vzVRsNQPwu0/s72-c/windows-10.png

_2
Dengan begitu thumbnail akan tampil sesuai dengan ukuran tempatnya berada sehingga dapat mempersingkat waktu loading

kode javascript

Cara menggunakan RESIZED di JavaScript

Ditulis oleh. Adhy Suryadi (adsbygoogle = window.adsbygoogle || []).push({}); Ditulis pada. 6/23/2016 (adsbygoogle = window.adsbygoogle || []).push({});

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

Ditulis oleh. Adhy Suryadi

Ditulis pada. 6/23/2016