Skip to main content

Membuat 2 Gambar Berdampingan Di Postingan Blog

Membuat 2 Gambar Berdampingan Di Postingan Blog - Halo sobat blogger, apa kabar? mudah-mudahan baik-baik saja yah sob. Untuk kesempatan kali ini Saya akan mencoba membuat postingan cara Membuat 2 Gambar Berdampingan Di Posatingan Blog.

Dengan membuat posisi 2 gambar berdampingan atau sejajar di dalam postingan blog ini berguna jika membuat postingan tentang komparasi 2 gambar, misal gambar sebelum dan sesudah proses tertentu.

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


Jika Anda tertarik dan ingin mencobanya, silahkan ikuti langkahnya seperti dibawah 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 dibawah ini ketika membuat postingan untuk menampilkan 2 gambar komparasi menjadi sejajar atau berdampingan. Sebaiknya buat 2 buah gambar dengan ukuran lebar dan tinggi 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.

Source: https://www.kompiajaib.com/2017/10/membuat-2-gambar-sejajar-di-dalam.html

You Might Also Like:

Buka Komentar