Memperbesar/Mengubah Ukuran Thumbnail Posting
Tabel Konten
Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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.
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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?
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>
Tag kondisional 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
Surga Kenari
terus menjadi yang terdepan pak
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.
Taufik Nurrohman
@Denddy Gustiana
Terkait: Posting Auto Read-More Tanpa JavaScript
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
Unknown
alhamdulillah berhasil diterapkan solusi yg sangat manjur :-bd \o/
sebenarnya saya sudah membaca pada posting http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html. Tapi penerapannya nggak mudeng hehehe :D
terima kasih banyak bang :)
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:
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
Taufik Nurrohman
Angka 72 itu bawaan, tidak perlu diganti-ganti.
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 = "float" ;
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?
Sodikin Kurniawan
Mau tanya kalau script diatas di sisipin untuk memanggil img di youtube jika kalau di posting terdapat video dari youtube gimana ya ?
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:
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 variabelimage_size
jadi150
: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.
Unknown
sip sip. . \o/
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 :)
Taufik Nurrohman
Ini wide → http://jsfiddle.net/tovic/hzQN7/82
Febri Tri Harmoko
mas saya mau tanya..
kalau di blog saya ini gimana untuk ngeresize gambar pada tampilan homepage nya ?
http://himapsikunja.blogspot.com/
Taufik Nurrohman
Pakai tag kondisional → /2011/08/tag-kondisional-tingkat-lanjut.html
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
Taufik Nurrohman
Loading lama.
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
itu kan jika ukuran image thumbnail nya sama seperti 200 x 200
nah jika berbeda seperti punya saya 240px buat lebar dan 150px buat tinggi itu gimana gan ?? mohon penjelasannya
Taufik Nurrohman
Sudah ada jawabannya di sini → /2012/07/memperbesar-thumbnail-posting.html?showComment=1426945222112#c6120402979896216573
Unknown
keren mas tutorialnya...salam
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:
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
Taufik Nurrohman
Cek → /2011/08/pemahaman-tag-kondisional-tingkat.html
admin
klo memperbesar ukuran gambar di homepage versi mobile caranya gmn gan ?
Taufik Nurrohman
→ /2016/06/mengubah-ukuran-thumbnail-tanpa.html
lutfiyah
Mas, cara mendapatkan tautan .jpg dari https://lh3.googleusercontent.com gimana? Yang bukan dari blogspot?
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.