Merubah Ukuran Gambar Sesuai Lebar Dan Tinggi

Saturday, September 27, 2014

Gambar atau image pada blogspot memiliki pengaturan yang unik, secara otomatis picassa dapat melakukan cropping atau pemotongan sesuai dengan beberapa kriteria mulai dari kecil, sedang sampai besar.

Ukuran pemotongan gambar yang sudah ditetapkan blogger antara lain: s72-c untuk ukuran thumbnail (lebar 72px x tinggi 72px), s200 untuk ukuran kecil (200 px x tinggi), s320 untuk ukuran sedang (320px x tinggi), s400 untuk ukuran besar 400px x tinggi), s640 untuk ukuran besar sekali (640px x tinggi) dan s1600 untuk ukuran normal.

Gambar yang berukuran persegi dapat diatur dengan menambahkan tanda -c pada link gambar, contohnya pada gambar dibawah ini:

Gambar diatas ini (link aslinya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWApLGGm7aLEvqsfkaNX-EAajLMc4eb84gWkhLqgLY6s7K_jE4PRW20duIL7-1X2F8DSe_31EgebTIwooNlhxDgaWm3JZCtRJBKObrVRLFUSP9qb6hstvZL0saAtFtT_IALdqcuk6QJkz/s1600/eid-mubarak.jpg) sebenarnya memiliki ukuran 1600px x 1066px, namun setelah dicrop untuk ukuran thumbnail, maka menjadi seperti diatas (berukuran 72px x 72px).

Jika /s1600/ pada link diatas diubah menjadi /s320/, maka ukuran gambar akan berubah menjadi 320px x tinggi gambar, yaitu 320px x 213px; contoh:

Agar gambar menjadi persegi sama sisi 320px x 320px, maka pada url harus ditambahkan -c, contoh:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWApLGGm7aLEvqsfkaNX-EAajLMc4eb84gWkhLqgLY6s7K_jE4PRW20duIL7-1X2F8DSe_31EgebTIwooNlhxDgaWm3JZCtRJBKObrVRLFUSP9qb6hstvZL0saAtFtT_IALdqcuk6QJkz/s320-c/eid-mubarak.jpg

Format lainnya untuk mengatur ukuran lebar dan tinggi gambar adalah dengan menggunakan format:

wlebargambar-htinggigambar-c seperti: w1000-h200-c atau w1000-h200-p

contoh link: http://3.bp.blogspot.com/-2Rc2f-q9kiQ/VCcZ_gXmAJI/AAAAAAAAEIk/mGeA6ZyJe5w/w1000-h200-c/eid-mubarak.jpg

contoh link: http://3.bp.blogspot.com/-2Rc2f-q9kiQ/VCcZ_gXmAJI/AAAAAAAAEIk/mGeA6ZyJe5w/w1000-h200-p/eid-mubarak.jpg

contoh gambar:

Javascript untuk merubah thumbnail ataupun gambar di blogspot agar ukurannya sesuai dengan lebar dan tinggi yang diinginkan adalah sebagai berikut:

Letakkan script ini diatas </head>

Script 1: untuk merubah gambar ukuran lebar 72px menjadi lebar 250px dan tinggi 250px

<script type="text/javascript">//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('PopularPosts1', 250);
//]]></script>

Script 2: untuk merubah gambar ukuran lebar 72px menjadi menjadi lebar 250px dan tinggi 150px

<script type="text/javascript">//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/w" + size + "h150-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('PopularPosts1', 250);
//]]></script>

Script 3: untuk merubah gambar ukuran lebar 72px menjadi menjadi lebar 550px dan tinggi 375px

<script type="text/javascript">//<![CDATA[
function resizeThumb(parentID, size1, size2) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/w" + size1 + "-h" + size2 + "-c");
        image[i].width = size1;
        image[i].height = size2;
    }
}
resizeThumb('PopularPosts1', 550, 375);
//]]></script>

Script 4: untuk merubah gambar ukuran lebar 1600px menjadi menjadi lebar 450px dan tinggi 775px

<script type="text/javascript">//<![CDATA[
function resizeThumb(parentID, size1, size2) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s1600/, "/w" + size1 + "-h" + size2 + "-c");
        image[i].width = size1;
        image[i].height = size2;
    }
}
resizeThumb('Blog1', 450, 775);
//]]></script>

Contoh: