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 berkhasiat jikalau menciptakan postingan wacana komparasi 2 gambar, misal gambar sebelum dan sehabis proses tertentu.
Dengan begitu pembaca akan lebih gampang membandingkan gambar sebelum dan sesudahnya. Contohnya aku buat menyerupai pada JSFiddle di bawah ini.
Jika Anda ingin mencobanya silahkan ikuti langkahnya di bawah ini.
Silahkan simpan style css berikut di atas arahan
</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 arahan berikut saat menciptakan postingan untuk menampilkan 2 gambar komparasi menjadi sejajar. Sebaiknya buat 2 buah gambar dengan ukuran yang sama semoga tampilannya anggun dan rapih.
<div class="image_2column left">
<img alt=" Ada beberapa sahabat Kompi Ajaib Yang meminta dibuatkan cara memasang Membuat 2 Gambar Sejajar Di Dalam Postingan Blog" height="" width="" src="URL GAMBAR 1 DI SINI" title="Membuat 2 Gambar Sejajar Di Dalam Postingan Blog" />
<p>
Keterangan gambar 1 di sini.
</p>
</div>
<div class="image_2column right">
<img alt=" Ada beberapa sahabat Kompi Ajaib Yang meminta dibuatkan cara memasang Membuat 2 Gambar Sejajar Di Dalam Postingan Blog" height="" width="" src="URL GAMBAR 2 DI SINI" title="Membuat 2 Gambar Sejajar Di Dalam Postingan Blog" />
<p>
Keterangan gambar 2 di sini.
</p>
</div>
<div class="clear"></div>
Silahkan sesuaikan tag-tag untuk gambar Anda.
Semoga bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat 2 Gambar Sejajar Di Dalam Postingan Blog"
Posting Komentar