Tidak seperti Blogger saat jadul dulu *saat gue mulai ngeblog pas kelas 2 SMA* sekarang Blogger dah jauh lebih canggih, semua tools yang dibutuhkan buat menambah gambar lalu kemudian me-resizenya sudah tersedia lengkap dan mudah digunakan. Kamu bisa mengupload gambar/foto langsung ke platform Blogger dan mengubah dimensinya dengan mudah, sehingga lebih pas dengan konten saat dilihat.
Untuk melakukannya buatlah sebuah post lalu klik icon photo pada toolbar bagian atas disebelah setting font style. Pop-up window akan muncul dan menanyakan mana gambar yang akan di upload. Kamu akan disodori beberapa sumber gambar seperti:
- Dari local computer (PC)
- Dari gambar yang diupload baru-baru ini
- Picasa Web Albums
- Dari URL
Setelah gambar yang kamu pilih selesai di upload maka akan muncul 4 opsi untuk mengatur sizes gambar -- small, medium, large, and x-large; Pada menu ini juga memberi kamu opsi untuk mengatur posisi (alignment). Namun jika ternyata ukuran gambar yang kamu kehendaki tidak tersedia apa yang akan kamu lakukan? JANGAN bingung! Berikut ini akan saya share trik untuk me-resize secara otomatis ukuran gambar sehingga sesuai dengan area post.
Step #1: Mempertahankan Kualitas Gambar
Pertama jika kamu hendak mengubah ukuran gambar maka perlu diingat agar ukuran gambar lebih besar dari 640px saat pada opsi ukuran x-large. Tidak masalah jika mengubah gambar yang besar menjadi lebih kecil, namun tidak demikian halnya jika yang diubah adalah gambar kecil yang diperbesar, kualitas gambarnya akan menurun drastis. Penting diingat juga agar memperhatikan ukuran gambar; semakin besar gambar, maka semakin lama loading blog.
Photoshop adalah alat yang sempurna untuk meresize atau memodifikasi gambar sebelum kamu post, tetapi akan buang waktu banyak bila menggunakan Photoshop. Karena jika cuma sekedar meresize gambar ada banyak freeware lain yang lebih mudah digunakan. Tentukan berapa ukuran dimensi gambar yang akan ditampilkan dan setting manual ke ukuran tersebut; kebanyakan blogger menggunakan 700px sebagai ukuran yang paling tepat.
Nah setelah diupload dan diresize coba klik opsi 'Original size'. Jika gambar/foto tersebut melewati batas post editor maka kemungkinan besar size gambar tersebut lebih besar daripada area body post, sooo….let’s fix it agar ukurannya sesuai dan tidak terlalu besar ;)
Step #2: Memodifikasi CSS
Selanjutnya yang perlu kamu lakukan adalah memodifikasi CSS pada blog. Jangan khawatir; kamu tidak perlu pengalaman terlampau expert untuk ngelakuin ini :p
Masuk ke Dashboard lalu pilih 'Template' » 'Customize'. Kamu akan menemukan opsi 'Advanced', klik menu tersebut lalu akan ada tab 'Add CSS' . . . . paste kode berikut di box tersebut:
Menuliskan CSS pada box tersebut maka secara otomatis kode tersebut akan ditambahkan di antara tag <b:skin>....<b:skin> pada template blog kamu (Template » Edit HTML, diatas tag ]]></b:skin> ). Jadi tidak masalah mau di paste di atas kode ]]></b:skin> atau mem-paste di box efeknya sama saja.
Tapi sebelumnya saya beri tahu dulu, mengubah CSS pada blog maka akan mempengaruhi setiap post yang ada, tentunya pada gambar yang menggunakan opsi "Original size".
Untuk membuat post lebih rapi maka tambahkan kode yang berwarna hijau berikut:
Kode tersebut akan melenyapkan border dan padding pada gambar dan memberikan tampilan yang lebih natural. Tekan tombol "Apply to Blog" setelah selesai!
Note: trik ini hanya bekerja untuk gambar yang disetting pada 'Original Size'. Kamu bisa merubah setting semua gambar menjadi otomatis dengan menggunakan CSS berikut:
Tapi kamu harus tahu jika menggunakan setting ini maka semua gambar termasuk di sidebar atau floating image juga akan terpengaruh :p
Step #3: Membuat Post
Setelah serangkaian setting diatas dilakukan maka agar berfungsi kamu harus memilih size gambar pada opsi "Original size" saat meng-add gambar ke posting. Dan untuk gambar yang sudah diposting maka agar berfungsi juga ubahlah setinggnya ke "Original size".
Well done. Enjoy it :D
Untuk melakukannya buatlah sebuah post lalu klik icon photo pada toolbar bagian atas disebelah setting font style. Pop-up window akan muncul dan menanyakan mana gambar yang akan di upload. Kamu akan disodori beberapa sumber gambar seperti:
- Dari local computer (PC)
- Dari gambar yang diupload baru-baru ini
- Picasa Web Albums
- Dari URL
Setelah gambar yang kamu pilih selesai di upload maka akan muncul 4 opsi untuk mengatur sizes gambar -- small, medium, large, and x-large; Pada menu ini juga memberi kamu opsi untuk mengatur posisi (alignment). Namun jika ternyata ukuran gambar yang kamu kehendaki tidak tersedia apa yang akan kamu lakukan? JANGAN bingung! Berikut ini akan saya share trik untuk me-resize secara otomatis ukuran gambar sehingga sesuai dengan area post.
Step #1: Mempertahankan Kualitas Gambar
Pertama jika kamu hendak mengubah ukuran gambar maka perlu diingat agar ukuran gambar lebih besar dari 640px saat pada opsi ukuran x-large. Tidak masalah jika mengubah gambar yang besar menjadi lebih kecil, namun tidak demikian halnya jika yang diubah adalah gambar kecil yang diperbesar, kualitas gambarnya akan menurun drastis. Penting diingat juga agar memperhatikan ukuran gambar; semakin besar gambar, maka semakin lama loading blog.
Photoshop adalah alat yang sempurna untuk meresize atau memodifikasi gambar sebelum kamu post, tetapi akan buang waktu banyak bila menggunakan Photoshop. Karena jika cuma sekedar meresize gambar ada banyak freeware lain yang lebih mudah digunakan. Tentukan berapa ukuran dimensi gambar yang akan ditampilkan dan setting manual ke ukuran tersebut; kebanyakan blogger menggunakan 700px sebagai ukuran yang paling tepat.
Nah setelah diupload dan diresize coba klik opsi 'Original size'. Jika gambar/foto tersebut melewati batas post editor maka kemungkinan besar size gambar tersebut lebih besar daripada area body post, sooo….let’s fix it agar ukurannya sesuai dan tidak terlalu besar ;)
Step #2: Memodifikasi CSS
Selanjutnya yang perlu kamu lakukan adalah memodifikasi CSS pada blog. Jangan khawatir; kamu tidak perlu pengalaman terlampau expert untuk ngelakuin ini :p
Masuk ke Dashboard lalu pilih 'Template' » 'Customize'. Kamu akan menemukan opsi 'Advanced', klik menu tersebut lalu akan ada tab 'Add CSS' . . . . paste kode berikut di box tersebut:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
Menuliskan CSS pada box tersebut maka secara otomatis kode tersebut akan ditambahkan di antara tag <b:skin>....<b:skin> pada template blog kamu (Template » Edit HTML, diatas tag ]]></b:skin> ). Jadi tidak masalah mau di paste di atas kode ]]></b:skin> atau mem-paste di box efeknya sama saja.
Tapi sebelumnya saya beri tahu dulu, mengubah CSS pada blog maka akan mempengaruhi setiap post yang ada, tentunya pada gambar yang menggunakan opsi "Original size".
Untuk membuat post lebih rapi maka tambahkan kode yang berwarna hijau berikut:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
Kode tersebut akan melenyapkan border dan padding pada gambar dan memberikan tampilan yang lebih natural. Tekan tombol "Apply to Blog" setelah selesai!
Note: trik ini hanya bekerja untuk gambar yang disetting pada 'Original Size'. Kamu bisa merubah setting semua gambar menjadi otomatis dengan menggunakan CSS berikut:
.post-body img {
width:100%;
height:100%;
display: block;
}
width:100%;
height:100%;
display: block;
}
Tapi kamu harus tahu jika menggunakan setting ini maka semua gambar termasuk di sidebar atau floating image juga akan terpengaruh :p
Step #3: Membuat Post
Setelah serangkaian setting diatas dilakukan maka agar berfungsi kamu harus memilih size gambar pada opsi "Original size" saat meng-add gambar ke posting. Dan untuk gambar yang sudah diposting maka agar berfungsi juga ubahlah setinggnya ke "Original size".
Well done. Enjoy it :D
Tidak ada komentar:
Posting Komentar