Skip to main content

Membuat 2 Gambar Sejajar Di Dalam Postingan Blog

Ada beberapa sahabat Kompi Ajaib Yang meminta dibuatkan cara memasang 2 buah gambar sejajar di dalam postingan.

Membuat 2 gambar sejajar di dalam postingan ini berguna jika membuat postingan tentang komparasi 2 gambar, misal gambar sebelum dan sesudah proses tertentu.

Dengan begitu pembaca akan lebih mudah membandingkan gambar sebelum dan sesudahnya. Contohnya saya buat seperti pada JSFiddle di bawah ini.


Jika Anda ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan style css berikut di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.image_2column {
  width: 50%;
  float: left;
  text-align: center;
}
.image_2column img {
  width: 100%;
  height: auto;
  display: block;
}
.image_2column p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}
.image_2column.left {
  padding-right: 10px
}
.image_2column.right {
  padding-left: 10px
}
.clear {
  clear: both;
}
@media screen and (max-width:414px){
  .image_2column {
  width: 100%;
  float: none;
  margin-bottom:20px;
  }
  .image_2column.left {
  padding-right: 0
  }
.image_2column.right {
  padding-left: 0
  }
}
/*]]>*/
</style>
</b:if>

Kemudian gunakan kode berikut ketika membuat postingan untuk menampilkan 2 gambar komparasi menjadi sejajar. Sebaiknya buat 2 buah gambar dengan ukuran yang sama agar tampilannya bagus dan rapih.


<div class="image_2column left">
  <img alt="" height="" width="" src="URL GAMBAR 1 DI SINI" title="" />
  <p>
    Keterangan gambar 1 di sini.
  </p>
</div>

<div class="image_2column right">
   <img alt="" height="" width="" src="URL GAMBAR 2 DI SINI" title="" />
  <p>
    Keterangan gambar 2 di sini.
  </p>
</div>
<div class="clear"></div>

Silahkan sesuaikan tag-tag untuk gambar Anda.

Semoga bermanfaat.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB