Ditulis oleh: Ditulis pada: 10/13/2017
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 == "item"'>
<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.