Blogspot: Cara Menciptakan Ukuran Gambar Responsive Berubah Otomatis Sesuai Area Postingan

Posting yang sangat sederhana namun sangat diminta dari aku hari ini perihal cara mengubah ukuran gambar posting Anda secara otomatis di Blogger. Tutorial ini akan mengatakan kepada Anda bagaimana menciptakan gambar posting Anda mempunyai lebar yang sama dan membuatnya cocok dengan area postingan blog Anda dengan tepat untuk membantu meningkatkan tampilan blog Anda. Kode di bawah ini secara otomatis memutuskan tinggi sehingga menjaga proporsi orisinil dan gambar Anda tidak akan terlihat terdistorsi.

Silakan baca FAQ di final postingan ini jikalau Anda mengalami masalah.

TIPS UNTUK GAMBAR BESAR

Saya sarankan mengubah ukuran gambar Anda sebelum mengunggahnya ke posting Anda. Jika Anda mengunggah gambar besar dan memakai isyarat di bawah ini untuk mengubah ukurannya secara otomatis lebih kecil, maka peramban terlebih dahulu akan memuat gambar yang lebih besar sebelum membaca sisa isyarat di template Anda. Ini berarti blog Anda akan lebih lambat dimuat. Saya juga menyarankan menentukan ukuran orisinil di opsi Blogger alasannya tidak akan memampatkan atau mengubah kualitas gambar Anda. Ada isu lebih lanjut perihal ini di FAQ di final posting. Pertahankan ukuran gambar Anda - jikalau Anda mencoba menciptakan gambar kecil yang lebih besar maka akan terlihat buram, pixelated dan membentang.

Posting yang sangat sederhana namun sangat diminta dari aku hari ini perihal cara menguba Blogspot: Cara Membuat Ukuran Gambar Responsive Berubah Otomatis Sesuai Area Postingan

METODE 1 - SECARA OTOMATIS RESIZES GAMBAR BLOGGER MENGGUNAKAN CSS

Pergi ke Tema > Edit HTML dan temukan isyarat ]]> </b:skin>.

Di atas isyarat ]]> </b:skin> tambahkan salah satu dari yang berikut.

Jika Anda ingin semua gambar mempunyai lebar 600px, maka gunakan yang berikut ini. Perhatikan bahwa ini sanggup menimbulkan gambar Anda tampak membentang / pixelated jikalau mereka lebih kecil dari ukuran yang ditetapkan.
.post-body img { width:600px; height:auto; }
Jika Anda ingin semua gambar mempunyai lebar setidaknya 600px, maka gunakan isyarat ini. Perhatikan bahwa ini sanggup menimbulkan gambar Anda tampak membentang / pixelated jikalau mereka lebih kecil dari ukuran yang ditetapkan.
.post-body img { min-width:600px; min-height:auto; }
Jika Anda ingin gambar Anda menjadi lebar maksimal 600 piksel, gunakan isyarat ini. Ini akan mengubah ukuran gambar yang lebih besar sehingga mereka pas di ruang. Saya merekomendasikan cara ini!
.post-body img { max-width:600px; max-height:auto; }

Kemudian ubah nilai lebar yang ditampilkan dalam warna merah menjadi angka yang sesuai dengan area posting blog Anda. Jika luas area posting Anda diatur dengan benar, Anda juga sanggup mengubah nilai di atas menjadi 100%. Anda juga sanggup bergabung dengan A, B, dan C meskipun ini biasanya tidak perlu. Saat mengunggah gambar, pastikan Anda menentukan Ukuran Asli untuk mendapat kualitas sebaik mungkin.

METODE 2 - SECARA OTOMATIS RESIZES BLOGGER GAMBAR MENGGUNAKAN SCRIPT

Cara alternatif ialah dengan memakai skrip ini dengan Blogxpertise. Ini tidak berfungsi dengan baik untuk aku di beberapa templat blog, tetapi yang lain bekerja dengan baik.

Tambahkan skrip berikut ke Tema > Edit HTML > di atas isyarat </head>.

Baca Juga

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
// the dimension of your content within the columns
var areawidth = $('#Blog1').width();
$('.post-body').find('img').each(function(n, image){
var image = $(image);
var height = image.attr('height');
var width = image.attr('width');
var newHeight = (height/width * areawidth).toFixed(0);
image.attr('width',areawidth).attr('height',newHeight);
var greater = Math.max(areawidth,newHeight);
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
});
});
//]]></script>

Anda kemudian harus menambahkan isyarat berikut ke Tema > Edit HTML> di atas isyarat ]]> </b:skin> dan mengubah nilai dalam warna merah untuk memindahkan gambar Anda kembali ke area posting jikalau balasannya terlalu memenuhi area posting.

.post-body img { margin-left: -30px;}

atau untuk memindahkannya dengan benar

.post-body img { margin-left: 30px;}

FAQ-PERTANYAAN YANG SERING DIAJUKAN

GAMBAR SAYA BLUR, BAGAIMANA SAYA MEMPERBAIKI INI?

Lihat postingan ini perihal cara memperbaiki gambar buram di Blogger dan menjadikannya kualitas tinggi!

BAGAIMANA SAYA MENGEDIT GAMBAR SAYA SEBELUM MENGUPLOAD?

Dua goresan pena terakhir aku ada di tool pengeditan gambar yang merupakan alternatif untuk Photoshop yang tersedia secara online dan untuk mengunduh software yang digunakan Windows dan Mac. Anda sanggup memuat gambar ke dalam aktivitas dan cukup mengubah ukuran ke lebar ideal Anda sebelum mengekspor / menyimpan dan mengunggah ke blog Anda.

BAGAIMANA SAYA MENGHENTIKAN GAMBAR LAIN DARI MENGUBAH?

Jika Anda mempunyai tanda tangan (signature) di posting blog Anda yang juga telah dibentuk lebih besar, periksa cara-cara alternatif untuk menambahkan tanda tangan ke blogger yang tidak akan terpengaruh oleh isyarat di atas atau gunakan id div Anda untuk mengubah ukuran gambar seperti .signature { width: 120px !important; }. Metode ini sanggup diterapkan ke gambar lain.

Jika Anda mempunyai gambar lain dalam posting Anda, Anda mungkin perlu menambahkan beberapa isyarat untuk memberi tahu Blogger semoga tidak mengubah ukurannya, contohnya untuk melayang di atas tombol pin yang sanggup Anda tambahkan .pinimg { width: 95px !important; } ke CSS Anda sebelum ]]> </b:skin> untuk menciptakan pin itu menekan tombol dengan ukuran yang benar lagi. Jika memakai InLinkz, Anda sanggup menambahkan ._inlinkzI {width: 100px !important;} sebelum isyarat ]]> </b:skin> untuk menghubungkan entri dengan ukuran yang benar lagi, atau jikalau Anda mempunyai Relate tambahkan .nr_img { min-width: 150px !important; } sebelum isyarat ]]> </b:skin> untuk memperkecil ukuran thumbnail.

BAGAIMANA SAYA MEMPERBAIKI Alignment GAMBAR SAYA?

Anda kemudian harus menambahkan isyarat berikut ke Tema > Edit HTML > isyarat di atas ]]> </b:skin> dan mengubah nilai dalam warna pink untuk memindahkan gambar Anda ke kiri atau kanan ke area posting jikalau mereka meluap area posting.