:.
Bismillaahirrahmaanirrahiim !
Manteman pada artikel ini ane mau berbagi cara agar ada jarak antara gambar atas dan bawah contohnya bisa manteman lihat dua gambar di bawah ini berdempet. Tentunya kadang kita ingin ada jarak sedikit agar terlihat lebih enak.
Klo terlihat seperti di bawah ini tentunya tidak enak dilihat gambar di samping dan tidak ada jarak antara gambar yang atas dan bawah sehingga jika ditambahkan caption atau keterangan untuk gambar menjadi tidak nyaman diliat.
Untuk gambar berada di tengah bisa cara menggunakan cara langsung melalui alignment di menu posting blogger dengan cara memblok gambar terlebih dahulu kemudian pilih alignment center di menu posting.
Namun, terkadang mentok alias ga bisa. Nah, jika terjadi begitu klik html yang berada di sebelah compose berada di sebelah kiri atas menu posting blogger.
Artinya manteman perlu menambakan kode html agar gambar di tengah dan ada jarak berikut kodenya :
Tambahkan kode yang berwarna biru seperti terlihat di bawah ini diantara kode skrip gambar manteman agar gambar berada di tengah dan agar ada jarak anatara gambar atas dan bawah tambahkan kode yang berwarna hijau diantara kode html gambar, kode akan terlihat seperti di bawah ini :
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="http://s587.photobucket.com/user/vitiram/media/Banner%202016/tiga%20langkah%201_zpsgljqxrtt.jpg.html" target="_blank"><img alt=" photo tiga langkah 1_zpsgljqxrtt.jpg" border="0" src="http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/tiga%20langkah%201_zpsgljqxrtt.jpg" /></a>
<br/>
<br/>
<a href="http://s587.photobucket.com/user/vitiram/media/Banner%202016/tanpa%20jago%20gambar_zpsmg45fruq.jpg.html" target="_blank"><img alt=" photo tanpa jago gambar_zpsmg45fruq.jpg" border="0" src="http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/tanpa%20jago%20gambar_zpsmg45fruq.jpg" /></a> </span>
</div>
Dan hasilnya menjadi seperti di bawah ini dan lebih enak dilihat dan jika ditambahkan caption atau keterangan gambar menajdi lebih enak dan kode html ini dapat diterapkan di halaman posting, html body, dan pada elemen widget.
Klo terlihat seperti di bawah ini tentunya tidak enak dilihat gambar di samping dan tidak ada jarak antara gambar yang atas dan bawah sehingga jika ditambahkan caption atau keterangan untuk gambar menjadi tidak nyaman diliat.
Untuk gambar berada di tengah bisa cara menggunakan cara langsung melalui alignment di menu posting blogger dengan cara memblok gambar terlebih dahulu kemudian pilih alignment center di menu posting.
Namun, terkadang mentok alias ga bisa. Nah, jika terjadi begitu klik html yang berada di sebelah compose berada di sebelah kiri atas menu posting blogger.
Artinya manteman perlu menambakan kode html agar gambar di tengah dan ada jarak berikut kodenya :
Tambahkan kode yang berwarna biru seperti terlihat di bawah ini diantara kode skrip gambar manteman agar gambar berada di tengah dan agar ada jarak anatara gambar atas dan bawah tambahkan kode yang berwarna hijau diantara kode html gambar, kode akan terlihat seperti di bawah ini :
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="http://s587.photobucket.com/user/vitiram/media/Banner%202016/tiga%20langkah%201_zpsgljqxrtt.jpg.html" target="_blank"><img alt=" photo tiga langkah 1_zpsgljqxrtt.jpg" border="0" src="http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/tiga%20langkah%201_zpsgljqxrtt.jpg" /></a>
<br/>
<br/>
<a href="http://s587.photobucket.com/user/vitiram/media/Banner%202016/tanpa%20jago%20gambar_zpsmg45fruq.jpg.html" target="_blank"><img alt=" photo tanpa jago gambar_zpsmg45fruq.jpg" border="0" src="http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/tanpa%20jago%20gambar_zpsmg45fruq.jpg" /></a> </span>
</div>
Dan hasilnya menjadi seperti di bawah ini dan lebih enak dilihat dan jika ditambahkan caption atau keterangan gambar menajdi lebih enak dan kode html ini dapat diterapkan di halaman posting, html body, dan pada elemen widget.
|
| contoh keterangan |
|
| contoh keterangan |
Jumlah kode <br/> dapat ditambahkan sesuai kebutuhan manteman loh, mudah kan ?. Oh iya jika ingin mudah menuliskan kode html agar gambar berada di tengah bsia juga menggunakan kode html seperti ini :
<div align='center'>
Kode html gambar di sini
</div>
Kata center berarti tengah dan dapat diganti oleh sahabat jika gambar ingin berada di kiri dengan 'left', dan jika gambar ingin berada di sebelah kanan ganti dengan kata 'right'.
Sialhkan dicoba ya ...
0 Comment to "Cara Agar Gambar di Tengah dan ada Jarak Atas dan Bawah"
Post a Comment