0 Cara Membuat Dua gambar Sejajar Dengan Frame

Posted by Jhon Frie. Category: TUTORIAL BLOG

Pada Postingan kali ini saya akan sharing cara memasukkan dua gambar yang sejajar dalam postingan blog yang disertai dengan frame, sehingga gambar yang kita masukkan akan kelihatan lebih rapi. Dua gambar sejajar yang saya maksud seperti contoh dibawah ini.

Cara ini sebenarnya adalah suatu trik yang digunakan untuk membuat baground text yang terdapat dalam sebuah kolom, akan tetapi text nya di kosongkan sehingga yang terlihat hanya gambarnya saja.

Ok, langsung saja pada proses, caranya tidak rumit, cukup menambah sedikit HTML kemudian mengedit ukuran serta warna frame.

cara pertama:
Masukkan kode HTML berikut di tab HTML bukan di compose, tepatnya dibawah kode
<div dir="ltr" style="text-align: left;" trbidi="on">

<center>
<table>
<tr><td><div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbNNVoVEokMRQvywHBKNvjQzgzXQAZ3tJjEEOzAnbKIFP7Vg0q6rA05ZBBjwm440Kg0UN5X8Hr0uHTV5JkFc9oaUVciR-69vYm4uTUUtWaypBeM95Gl7xUZHU0f6fUyo-QqquXJnNEw/s1600/riad-night-scene-render-cam20b-smallbanner-by-nomad-inception.jpg); border: 4px ridge #EE1E1E; height: 126px; padding: 15px; width: 250px;">
</div>
</td>
<td><div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowbPU5Bo2eYjzlTEyRyTPV3iezfuQuXqhM9imed_8VqL9YSfrIVslI0jDFndyzB5Hpo9QN4PjlRNBxk6GaKCtbrRwVliIeEcH6zFgZp7EN6gpCbQHjQJlaGGZ6sztBZuEq6cwD8uK4A/s1600/islamic-exterior-design-cam02-daylight-smallbanner-by-nomad-inception.jpg); border: 4px ridge #37EE1E; height: 126px; padding: 15px; width: 250px;">
</div>
</td>
</tr>
</table>
</center>

Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbNNVoVEokMRQvywHBKNvjQzgzXQAZ3tJjEEOzAnbKIFP7Vg0q6rA05ZBBjwm440Kg0UN5X8Hr0uHTV5JkFc9oaUVciR-69vYm4uTUUtWaypBeM95Gl7xUZHU0f6fUyo-QqquXJnNEw/s1600/riad-night-scene-render-cam20b-smallbanner-by-nomad-inception.jpg dengan URL gambar .

#EE1E1E adalah warna dari frame
 4px = ukuran /ketebalan frame
126px = tinggi gambar
250px = lebar gambar
ridge = jenis frame

Kita bisa mengganti jenis frame/ ridge sesuai dengan yang kita inginkan.

Solid

Dashed

Dotted

Double

Groove

Outset

Tweet

Komentar →