Cara membuat gambar di samping tulisan dengan html dan css di bloger

Untuk membuat tata letak artikel pada blogspot seperti koran dengan gambar di samping tulisan, Anda dapat menggunakan kombinasi HTML dan CSS. Berikut adalah langkah-langkahnya:

Unggah gambar yang ingin Anda tampilkan ke server blogspot Anda dan dapatkan URL-nya.
Buka editor blogspot Anda dan buka postingan yang ingin Anda tambahkan gambar di samping tulisan.
Tambahkan kode HTML berikut di dalam postingan Anda:

php
<div class="article-container">
  <div class="article-image">
    <img src="URL-gambar" alt="Deskripsi gambar" />
  </div>
  <div class="article-text">
    <p>Tulisan artikel Anda.</p>
  </div>
</div>

Ganti "URL-gambar" dengan URL sebenarnya dari gambar yang ingin Anda tampilkan, dan "Deskripsi gambar" dengan deskripsi singkat tentang gambar tersebut. Tulisan artikel Anda harus ditempatkan di dalam elemen <p> di dalam <div class="article-text">.

Tambahkan kode CSS berikut ke dalam kode CSS blogspot Anda atau letakkan di berkas CSS terpisah: letakan kode ini di bawah <style> jika ada 3 maka coba 1 per 1

css
.article-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.article-image {
  flex: 0 0 40%;
  margin-right: 20px;
}

.article-image img {
  width: 100%;
  height: auto;
}

.article-text {
  flex: 1;
}

.article-text p {
  margin: 0;
  text-align: justify;
}

Kode CSS ini akan menempatkan gambar di sebelah kiri dan teks di sebelah kanan. Jika Anda ingin menempatkan gambar di sebelah kanan dan teks di sebelah kiri, ubah margin-right pada .article-image menjadi margin-left.

Simpan postingan Anda dan lihat hasilnya. Gambar harus muncul di samping tulisan Anda dengan tata letak seperti koran. Jika tata letak tidak sesuai dengan yang diinginkan, sesuaikan properti CSS sesuai dengan kebutuhan Anda.