Membuat 2 Gambar Berdampingan Di Postingan Blog

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

Dengan menciptakan posisi 2 gambar berdampingan atau sejajar di dalam postingan blog ini mempunyai kegunaan kalau menciptakan postingan ihwal komparasi 2 gambar, misal gambar sebelum dan setelah proses tertentu.

Dengan begitu pembaca akan lebih gampang untuk membandingkan gambar sebelum dan sesudahnya. Contohnya aku buat ibarat pada JSFiddle di bawah ini.


Jika Anda tertarik dan ingin mencobanya, silahkan ikuti langkahnya ibarat dibawah ini.

Silahkan simpan style css berikut di atas arahan </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 arahan dibawah ini dikala menciptakan postingan untuk menampilkan 2 gambar komparasi menjadi sejajar atau berdampingan. Sebaiknya buat 2 buah gambar dengan ukuran lebar dan tinggi yang sama biar tampilannya anggun dan rapih.

 <div class="image_2column left">
   <img alt=" Untuk kesempatan kali ini Saya akan mencoba menciptakan postingan cara  Membuat 2 Gambar Berdampingan Di Postingan Blog" height="" width="" src="URL GAMBAR 1 DI SINI" title="Membuat 2 Gambar Berdampingan Di Postingan Blog" />
   <p>
     Keterangan gambar 1 di sini.
   </p>
 </div>
 
 <div class="image_2column right">
    <img alt=" Untuk kesempatan kali ini Saya akan mencoba menciptakan postingan cara  Membuat 2 Gambar Berdampingan Di Postingan Blog" height="" width="" src="URL GAMBAR 2 DI SINI" title="Membuat 2 Gambar Berdampingan Di Postingan Blog" />
   <p>
     Keterangan gambar 2 di sini.
   </p>
 </div>
 <div class="clear"></div>

Silahkan sesuaikan tag-tag untuk gambar Anda.

Source: https://xomlic.blogspot.com/search?q=membuat-2-gambar-sejajar-di-dalam

Share this Article