Mecha versi 2.6.4 sudah dirilis!

Memperbesar/Mengubah Ukuran Thumbnail Posting

Tabel Konten
  1. Metode 1: Menggunakan JavaScript Murni 
  2. Metode 2: Menggunakan jQuery 
  3. Thumbnail Lain? 
    1. Versi JavaScript 
    2. Versi jQuery 
Memperbesar Thumbnail Posting

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail
Dalam pesan Facebook

Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ada cara sederhana yang bisa dilakukan dengan mudah menggunakan JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya seperti yang pernah Saya ulas dengan cukup jelas di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, misalnya s200-c.

Metode 1: Menggunakan JavaScript Murni 

Salin kode ini dan letakkan di atas tag </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![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('main-wrapper', 200);
//]]>
</script>
</b:if>
</b:if>

Fungsi dieksekusi pada bagian ini:

resizeThumb('main-wrapper', 200);

main-wrapper adalah ID kolom posting, dan 200 adalah ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.

Ganti juga ukuran width dan height thumbnail posting dalam kode CSS ini:

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0 10px 0 0;
}

… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan contoh di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.

Simpan semua perubahan dan lihat hasilnya.

Lihat Sampel

Metode 2: Menggunakan jQuery 

Pada intinya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin kode ini dan letakkan di atas kode </head> atau </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
$(function() {
    resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200
});
//]]>
</script>
</b:if>
</b:if>

Di sini Saya menggunakan selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda bisa saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya jika template Anda memiliki struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak menggunakan nama kelas thumbnail pada versi manipulasi JavaScript adalah karena Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban tua - When can I use getElementsByClassName?

Lihat Sampel

Thumbnail Lain? 

Bukan hanya thumbnail pada posting saja yang bisa diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, misalnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapatkan ide JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita bisa menemukan ciri khususnya dalam path lokasi gambar seperti s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita bisa mengubah ukuran-ukuran gambar menggunakan JavaScript dengan cara mengganti besarannya. berikut ini adalah contoh sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:

Versi JavaScript 

<script>
//<![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;
    }
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>

Versi jQuery 

<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>

bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.

Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada tempat yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):

function resizeThumb(parentID, size) { ... }

Setelah itu Anda bisa menggunakan fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:

resizeThumb('Blog1', 300);
resizeThumb('PopularPosts1', 200);
resizeThumb('Widget1', 50);
...

68 Komentar

Unknown

Wakakakakakkakk Ujung2nya ya tetep pake JS kode blogger masih secret :D

Unknown

mengenai auto read more.. saya masih ada yang belum paham terutama saat di source atau ctrl+U . semua artikel code masih terbuka dan bahkan saat loading pun masih berpengaruh berat pada blog, pertanyaanya..
cara agar readmore itu benar2 memotong seluruhnya sampai source code. gimana..??
kata lain seperti snippet pada wordpress...
atau source yang saya ambil dari blog DTE ini seperti pada gambar.

Unknown

@Taufik Nurrohman Tes-tes, Ternyata kegantengan Al firouz terbukti juga dari Group FB sampai di Blog tutorial..
Kalau udah baca artikel bang taufik pusing saya untuk memahaminya dan Perlu waktu benggong dulu sejenak liat kode-kode-nya dan memahami-nya tapi kagak paham-paham..
Nasib-nasib heheeee

Beben Koben

kalo cuman merubah ukuran thumbnail mah gak usah pake script, CSS jg bisa kok!

Taufik Nurrohman

Bukan cuma ukurannya saja yang diubah, tapi juga resolusinya :W

Unknown

Mas mau tanya nih,,,kok ukuran gambar di homepage ku masih kena scaled image ya,,,padahal di image properties resolusi udah benar ke ukuran 200, tapi malah kena scaled jadi 60x50,,,padahal thumbnail udah tak pakai'in class post-thumbnail..tapi tetep gitu aja,,,gak ada perubahan.

Taufik Nurrohman

Di atas sudah Saya tuliskan, ganti juga ukuran pada kode CSS-nya:

.post-thumbnail {
width:200px;
height:200px;
float:left;
margin:0px 10px 0px 0px;
}

Unknown

:-bd waw infonya bagus banget, hampir semua masalah dapat saya pecahkan di blogmu ini..
Terimakasih.
izin menetap sobat :)

http://zone-uchiha.blogspot.com/

azewdsignet

mas`ko susah ya resolusinya malah burem di image ya :(

Taufik Nurrohman

Cuma berlaku untuk gambar yang diunggah melalui Blogger secara langsung, selain itu tidak bisa.

Anonim

betul harus upload di blogger
atau mungkin gini kali kang kasusnya,
udah liat blognya juga tampilan gambarnya pake wide jadi ya nga pas klw ngikutin script di atas, karena kodenya berakhiran -c yg artinya gambar persegi
harus di edit dikit scriptnya biar tampilan gambarnya bisa wide
versi javascript
function resizeThumb(parentID, size, 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/, "/s" + size + "");
image[i].width = size;
image[i].height = size2;
}
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200, 90);
resizeThumb('PopularPosts2', 200, 90);
resizeThumb('stylify_random', 176, 130);
resizeThumb('post-body', 176, 130);

versi jquery
function resizeThumb(b, a, d, c) {
$(b).each(function () {
$(this).attr({
src: $(this).attr("src").replace("/s" + a + "-c/", "/s" + d + "/"),
width: d,
height: c
})
})
}
$(function () {
resizeThumb("#stylify_random img", "72", "176", "130");
resizeThumb(".post-body img", "72", "176", "130");
resizeThumb("#PopularPosts1 img", "72", "176", "90");
resizeThumb("#PopularPosts2 img", "72", "176", "90")
});

===========
oia kang sekalian tanya
itu yang versi javascript nga bisa risize element dg atribut class ya,,id doank bisanya ??

klw yang jquery selektornya kan lebih mudah :(

Unknown

kalau mau nerapin di blog saya timeslib.com biar thumbnailnya wide gmna gan , plese, help :(

Unknown

gan, kalo itu ".post-body img", "72", "176", "130"); saya ganti angka 176 sama 130 nya jadi 280 sama 147, trus angka 72nya jadi brapa ya?

timeslib.com

Anonim

makasih ya gan infonya ^^

Guru Seni Budaya

gambar di tampilan postingan saya kan terlalu lonjong... solusinya gimana? cepet ya....
www.sanggarsenipacul.blogspot.com

elfata

Makasih gan, izin tak pakai tipsnya di blog ku

Anonim

Hebat... hebat banget... keren.. cool... smuanya dah bwt agan \o/

Gunawan

Bisa tanya nda, gmn caranya memasang tag alt dan title pada gambar di blog yang menggunakan kode readmore otomatis. Kodenya kurang lebih seperti ini :
<script>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 680;
summary_img = 670;
img_thumb_height = 175;
img_thumb_width = 200;
</script>
<script>
//<![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");
if(img.length<=0) {
imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="http://1.bp.blogspot.com/-DewXrlymD20/UO_BfieN1eI/AAAAAAAAGFA/i3twgxtU4AI/s320/gambar-defaul-artikel-blog2.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Mohon penjelasannya ya... Plissss

you

kalo ane mah gini gan img Alt="Read more this content" title="Read more this content" src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
summ = summary_img;

semua title dan alt nya pada semua posting jadi sama ...

Unknown

kenapa ya saya udh nerapin semua dari jquery ampe javascript tetep hasilnya nihil -_-

s72-c <- link di gambarnya selalu -_- emang sih nongol di html imgnya <img scr='' width='500px' height='500px' />

nih jquery yang saya terapin
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
resizeThumb('.thumbmage img', '500', '500');
});
//]]>
</script>

Taufik Nurrohman

Ini betul lokasi gambarnya ada di sebelah sini?

$('.thumbmage img');

Sodikin Kurniawan

Mau tanya kalau script diatas di sisipin untuk memanggil img di youtube jika kalau di posting terdapat video dari youtube gimana ya ?

var yimage='<a href="'+url+'"><img src="'+image.replace('default', '0') + '" alt="'+title+'"/></a>';
if (image.indexOf("img.youtube.com")!= -1)return yimage;

terimakasih.

Taufik Nurrohman

Setahu Saya thumbnail YouTube tidak bisa masuk ke dalam elemen data:post.thumbnailUrl

Sodikin Kurniawan

Terimakasih banyak ... jawabnnya.. menmbah ilmu saya .. I LOVE DTE

Sodikin Kurniawan

Mau tanya lagi ne Bang .. dengan script di atas gambar akan diload aslinya baru di resize jadi jika saya cuman mengubah resize pajangnya dan saya menggunakan plugin masonry gambar tumbnail itu akan manumpuk . jadi bagaimana mengatasinya ya ... contohnya di template ini urangpoto.blogspot.com

Taufik Nurrohman

Tentukan lebar dan tinggi gambar ke CSS juga:

<script>
resizeThumb('main-wrapper', 200);
</script>
<style>
.post-thumbnail {
width: 200px;
height: 200px;
}
</style>

MH Nur

bang mau tanya cara agar gambar thumbnail auto resize gimana? di blog ane gambarnya jadi ngezoom malah.. cek blog ane bang (maaf g bermaksud promo) momojustshare.blogspot[dot]com

mohon pencerahannya...

Kang Rian

ini yang saya cari-cari pak taufik . terima kasih info nya . sangat membantu para blogger autodidact seperti saya . :)

Achmad Afandi

mas saya masih belum mengerti mas mohon dengan sangat mas penjelasannya, saya sudah praktekkan di blog saya tapi gambar post yang ada di homepage masih aja ngeblur mas? tolong pencerahannya...

Taufik Nurrohman

Mungkin karena kamu pakai templat kustom? Atau meletakkan skrip sebelum gambar-gambar termuat?

Achmad Afandi

maaf mas ini link'nya 'blogdemokangfandi.blogspot.com' silahkan di cek, tolong sekali mas karena saya tidak mengerti apa" tentang ini. gambarnya masih ngeblur mas... dan resolusinya masih tetap.

Taufik Nurrohman

Punyamu sudah punya fungsi pengubah resolusi gambar sendiri, namanya bp_thumbnail_resize. Coba cari di dalam templat. Lalu ubah nilai variabel image_size jadi 150:

function bp_thumbnail_resize(image_url, post_title) {
var image_size = 65; // ← ganti jadi `150`
var image_tag='<img src="' + image_url.replace('/s72-c/','/s' + image_size + '-c/') + '" class="postthumb" alt="' + post_title + '" title="' + post_title + '"/>';
if (image_url != "") return image_tag; else return "";
}

Achmad Afandi

wah.. terimakasih banyak mas, sudah membantu saya.. semoga tuhan selalu memberikan rizky'nya pada mas taufik. hehehe....
ikut jadi followers mas...

Achmad Afandi

terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.

Achmad Afandi

terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.

Bungfrangki

Kalau buat thumbnailnya jadi landscape?

artlistious

mantep banget gan, kebetulan saya juga baru pusying otak2x blogger . . .
http://shirostore.blogspot.com/

Zamrud Graphic

[ASK]

bagaimana caranya agar img bentuknya tidak tetap persegi ? semisal 200x100,
coba saya rubah kog gambarnya ngikut gepeng ? terimakaish..

Zamrud Graphic

\o/

terselesaikan .. thankyou DTE!

release "-c"

Unknown

lucu nih agan hehehe, nanya sendiri jawab sendiri \o/

Unknown

request buat thumbnail yg wide dong gan, buat diterapin diblog saya timeslib.com dong :)

Unknown

mas mau nanya ini kok ngeblur ya tumbnail postingnya udah saya praktekin gak berubah sama sekali , mohon pencerahannya mas? kasih solusi www.hyundaipurwokerto.com . tolong bantu mas

Reksa Andhika

Komentar ini telah dihapus oleh pengarang.

Reksa Andhika

Kadang script gk keload, jadi gambar ngeblur gitu.. gimana cara ngatasin masalah tersebut

Taufik Nurrohman

Biasanya karena konflik dengan skrip yang ada yang dituliskan di atasnya. Misal skrip yang terletak di sebelak atas skrip thumbnail ini rusak, itu akan membuat skrip di bawahnya menjadi gagal dieksekusi.

Unknown

keren artikelnya gan :D

Unknown

Mas Taufik,
permisi numpang tanya,
thumbnail URL popular post di blog saya ko jadi berubah dari .../s72-c/gambarku34.jpg
jadi .../w72-h72-p-nu/gambarku34.jpg

yang saya mau tanyakan gimana cara ngubah baris script ini:

image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");

supaya bisa bekerja diblog saya

terimakasih mas Taufik

Taufik Nurrohman

Coba:

foo.replace(/\/s72\-c/, '/w' + size + '-h' + size + '-p-nu/');

Unknown

Makasih gan ilmunya..

Unknown

,,, artikel nya bagus sekali lengkap dan detail patut jadi contoh,, saya mau minta tolong, saya ingin ukuran tumbnail di halaman homepage saya berukuran 150x150 saja, tapi saat artikel tersebut di buka atau di baca tetap dengan ukuran asli nya bukan 150x150 sperti di homepage nya? apakah bisa? mohon bantuan nya, saya lihat saudaraahli dalam hal ini, mohon bantuanya ya,, terima kasih

Abdul Rahim

klo yg mau dirubah hanya thumbnile dari satu post aja gimana?jadi misalkan dalam homepage, ada 5 post yang ditampilkan, jadi yang 4 post, ukuran thumbnile nya biasa aja, nah yang satu paling atas, dirubah jadi full.
gimana tu gan?

Unknown

Mau nyoba bantu jawab, semoga bener.
Coba kreasikan dengan kode CSS :nth-first-child.

Jika berhasil, masalah terakhirnya ada di resolusi gambar yang kemungkinan bakal pecah.

Jadi, anda bisa menggunakan script jQuery untuk merubah resolusi gambar tersebut agar 'normal' kembali.

Komentar telah ditutup.