-->

TUTORIAL: Cara Mengubah Ukuran Foto Otomatis pada Blogpost

on
Monday, March 30, 2015

Selamat Senin!

Monday Techno kali ini, saya mau kasih tutorial supaya semua foto di blog post ukurannya jadi sama. Tanpa perlu resize di Photoshop atau di software/apps editing foto!

Emang bisa ya? Bisa dong! :D


Tutorial ini khusus untuk Blogspot aja ya. Untuk WordPress tinggal Install Plugin-nya di sini. :)

Caranya gampang, via CSS. Masuk ke Dashboard - Template - Customize - Advance - Add CSS.
Kalau ada kode lain, biarkan aja jangan diotak-atik. Kemudian copy-paste kode di bawah ini:

.post-body img {
max-width: 600px !important;
height: auto !important;
}
.pinit-wrapper img {
max-width: 125px !important;
height: auto !important;
}


Yang saya bold dan diberi warna merah itu, ukuran maksimum foto yang akan ter-upload. Terserah sih bebas mau diisi berapa. Sesuaikan dengan width blognya aja.

NOTE: Kode ini fungsinya hanya mengecilkan foto yang terlalu besar. Foto yang ukurannya memang di bawah angka width maksimum, tidak akan jadi membesar.

Kode kedua yang pinit-wrapper itu fungsinya untuk Pin button Pinterest agar tidak ikut ter-resize. Kalaupun nggak install, Pin It button, nggak masalah sih, siapa tahu di masa depan mau install.

(Baca juga: Serunya Pinterest!)

Udah deh. Gampang kan?

Tapi meskipun sudah bisa di-resize otomatis, aku sih tetap sarankan untuk resize dulu foto-foto yang ukurannya sangat besar (misal di atas 1 MB). Fungsinya agar page blog post kita tidak terlalu berat saat loading. Foto yang berukuran besar juga ngabisin kuota internet orang yang baca. LOL.
ya!

A photo posted by annisa steviani (@annisast) on



-ast-





LIKE THIS POST? STAY UPDATED!


LATEST VIDEO

PLEASE SUBSCRIBE!
18 comments on "TUTORIAL: Cara Mengubah Ukuran Foto Otomatis pada Blogpost"
  1. Oo gitu. Itu yg kita set ukuran maximal kan? Soalnya pernah klo aku set foto ke ukuran extra large, malah melebar ke mana2 ngerusuhin blog. :3

    ReplyDelete
  2. Wiih, mulai sering ngepoin blog makmin satu ini dan ternyata banyak banget manfaatnya nih, ajarin bikin header lucu atuh mak :D #eeeh

    ReplyDelete
    Replies
    1. kumahaaa atuh tutorialnya kalau di blog mah susyah harus ngomong langsung hehehe

      Delete
  3. asik..makasih mak..ininih penting banget :)

    ReplyDelete
  4. mak, kalau buka blog via mobile gitu
    fotonya jadi kelihatan sama jg gak sizenya ?

    ReplyDelete
  5. oiya mak, udah post ttg bikin "back to top" blm mak?
    bagi linknya dong yg cara gampang :D

    ReplyDelete
    Replies
    1. sudaahh. ini linknya http://www.annisast.com/2015/02/tutorial-cara-memasang-button-back-to.html

      Delete
    2. aaaaaaaaak ..
      berhasilll
      makasihh makk,,.
      muaach :*
      salam buat Bebe :D

      Delete
  6. pengen nyoba... secara saya gaptek banget..,, biasanya otak atik gambar, ini bisa otomatis pula...

    ReplyDelete
  7. terimakasih sharingnya mak...langsung dicoba!

    ReplyDelete
  8. Maaak, kamuh kok keren sih *keprok*

    ReplyDelete
  9. Wiih .... alhamdulillah nemu ttg resize foto Blogspot di sini, Mak.
    Soalnya kalo Blogspot kan mentok, mau seberapa pun di-setnya, ukurannya mentok di sekitar 410px. Untung ada ini, mau saya praktekin aah. Makasih yaa :*

    ReplyDelete

Hallo! Terima kasih sudah membaca. :) Silakan tinggalkan komentar di bawah ini. Mohon maaf, link hidup dan spam akan otomatis terhapus ya. :)