Ketika pertama kali belajar menulis di blog terutama yang mengandung unsur foto atau gamber, ada kesulitan saat hendak mengatur atau menata banyak gambar atau foto, maklum saat itu ingin upload banyak foto. Problemnya adalah: gambarnya susah diatur, fasilitas yang ada seperti size (small, medium. large, original) dan Posisi (left, center, right) tidaklah membantu banyak, bahkan terkadang di klik kanan larinya ke kiri, di geser ke atas malah anjlok ke bawah. Bagaimana ini ?
Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.
Alhamdulillah problem tersebut sekarang sudah bisa diatasi, sudah ketemu skrip yang dapat menata gambar dan foto sekehendak yang kita mau.
Tapi sebelum saya bagi tipsnya, akan saya ajak pembaca memahami apa yang saya maksudkan, dengan membuat pembanding gambar sebelum dan sesudah memakai skrip tokcer ini.
1. Gambar / Foto Sebelum Menggunakan Script
Hanya memasukkan tiga foto, tapi mengaturnya agar rapi dan sejajar susah sekali - berantakan - padahal sudah menggunakan ukuran terkecil dan sudah bolak-balik merubah posisi (left - center - right).
Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.
Alhamdulillah problem tersebut sekarang sudah bisa diatasi, sudah ketemu skrip yang dapat menata gambar dan foto sekehendak yang kita mau.
Tapi sebelum saya bagi tipsnya, akan saya ajak pembaca memahami apa yang saya maksudkan, dengan membuat pembanding gambar sebelum dan sesudah memakai skrip tokcer ini.
1. Gambar / Foto Sebelum Menggunakan Script
Hanya memasukkan tiga foto, tapi mengaturnya agar rapi dan sejajar susah sekali - berantakan - padahal sudah menggunakan ukuran terkecil dan sudah bolak-balik merubah posisi (left - center - right).
2. Gambar / Foto Setelah Menggunakan Script
Berapapun jumlah gambar dan foto yang hendak dimuat, sangat mudah mengatunya, baik itu ukuran maupun posisi kita bisa menyetel sesuka hati.
A. Contoh gambar dengan garis (border=1,2, dst.)
|
|
 |
Gunung 1
|
Gunung 2
|
Gunung 3
|
B. Contoh gambar tanpa garis border.
| |  |
Gunung 1
|
Gunung 2
|
Gunung 3
|
3. Script dan Penjelasannya
Ketika anda sedang membuat artikel dan hendak menambahkan foto /gambar, caranya :
1. Klik HTML (di kiri atas halaman editing artikel).
2. Copy paste skrip di bawah di tempat di mana kalian mau meletakkan foto/gambar. Skrip berikut porsinya 3 gambar + 3 nama/keterangan gambar, kalian dapat menambah atau mengurangi jumlahnya sesuai porsi gambar kalian.
<table border="1">
<tr>
<td>Gambar 1</td>
<td>Gambar 2</td>
<td>Gambar 3</td>
</tr>
<tr>
<td>Keterangan Gambar 1</td>
<td>Keterangan Gambar 2</td>
<td>Keterangan Gambar 3</td>
</tr>
</table>
3. Kemudian kembali ke halaman editing dengan klik "Compose" di sebelah menu HTML, maka akan tampak kotak seperti berikut:
| Gambar 1 | Gambar 2 | Gambar 3 |
| Keterangan Gambar 1 | Keterangan Gambar 2 | Keterangan Gambar 3 |
4. Masukkan gambar lewat icon insert image seperti biasanya.
Keterangan:
A. Gambar 1 dst adalah kotak untuk memasukkan gambar.
B. Keterangan Gambar 1 dst adalah kotak untuk memberi judul atau keterangan.
C. Angka 1 dan 2 pada table border adalah ketebalan garis kotak, jika anda menginginkan kotak gambar tidak ditampilkan, gantilah angka pada table border menjadi " 0 " (Seperti contoh gambar masjid baris ke-2).
D. Untuk menambah atau mengurangi jumlah kotak anda tinggal copas atau delete bagian schript dimaksud, ingat ! "Gambar" berpasangan dengan "Keterangan Gambar"; maka menambah dan menghapus harus selalu beserta pasangannya.
E. Untuk merubah ukuran gambar, anda masuk ke HTML , merubah tinggi gambar, rubah angka pada height dan merubah lebar gambar, rubah angka width. (jika tidak terdapat height dan width di HTML, kembalilah ke compose, klik gambar, rubah ukurannya ke mana anda mau (small, medium, large, x-large, original size), setelah itu kembali ke HTML, pasti sudah ada height dan width di sana.
4. Tips Mengatur Ukuran Gambar / foto
Untuk mengatur Ukuran Gambar klik gambar yang mau di atur, dalam hal ini posisi editing adalah posisi Compose.
Pilihan pengaturan:
SMAL : ukuran kecil
MEDIUM : ukuran sedang
LARGE : ukuran besar
X-LARGE : ukuran super besar alias extra
Original Size : ukuran gambar sama dengan ukuran aslinya.
Left : Posisi gambar di sebelah kiri tulisan kita
Center : Posisi gambar di tengah tanpa ada tulisan kanan kiri
Right : Posisi gambar di belah kanan tulisan kita.
Add Caption : Membuat tulisan atau keterangan Gambar di bawah gambar
Propertis : Memberikan Judul Gambar seperti Tittle Text
Remove : Menghapus gambar,
Setelah dirasa cukup tampilan gambar - gambar yang kalian atur, jangan lupa liat hasilnya ^_^
Semoga bermanfaat.
Sumber:
http://amirdapir.blogspot.com/2012/08/cara-mengatur-ukuran-posisi-gambar-pada.html
SMAL : ukuran kecil
MEDIUM : ukuran sedang
LARGE : ukuran besar
X-LARGE : ukuran super besar alias extra
Original Size : ukuran gambar sama dengan ukuran aslinya.
Left : Posisi gambar di sebelah kiri tulisan kita
Center : Posisi gambar di tengah tanpa ada tulisan kanan kiri
Right : Posisi gambar di belah kanan tulisan kita.
Add Caption : Membuat tulisan atau keterangan Gambar di bawah gambar
Propertis : Memberikan Judul Gambar seperti Tittle Text
Remove : Menghapus gambar,
Setelah dirasa cukup tampilan gambar - gambar yang kalian atur, jangan lupa liat hasilnya ^_^
Semoga bermanfaat.
Sumber:
http://amirdapir.blogspot.com/2012/08/cara-mengatur-ukuran-posisi-gambar-pada.html
Tidak ada komentar:
Posting Komentar