Cara Membuat Gambar Sejajar Berdampingan di Blogger

Mangaip – Cara Membuat Gambar Sejajar Berdampingan di Blogger. Terkadang saat membuat postingan blog kita membutuhkan suatu gambar yang cukup banyak. Tetapi kita bingung dengan posisi dari gambar tersebut.
Coba deh upload beberapa gambar pada postingan blog sobat, kalau tidak diedit lagi maka hasilnya akan acak-acakan.
Dengan posisi gambar yang sejajar, maka pembaca pun akan melihatnya dengan nyaman. Coba kalau acak-acakan, sudah ditinggal duluan.
Lalu bagaimana caranya mang? Mamang akan memberikan beberapa kodenya, tenang kode ini diambil dari kompiajaib yang sudah terkenal dengan template-template kerennya.
Berikut langkahnya,
Pertama, silahkan patekan kode CSS dibawah ini, diatas 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>


Setelah itu, setiap akan membuat postingan dengan banyak gambar dengan posisi sejajar, gunakan html dibawah ini pada postingan sobat. Gunakan metode html, jangan metode compose. Berikut kodenya

Template Blogger Terbaik Rekomendasi

<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>

Isilah beberapa kodenya, berikut rinciannya:

  1. img alt: Gunakan kata kunci
  2. height: ukuran tinggi gambar harus sama dengan yang lainnya
  3. width: ukuran lebar gambar harus sama
  4. src: isi dengan url gambar tujuan
  5. keterangan gambar 1&2: isi dengan keterangan gambar masing-masing
Selamat mencoba deh sobat mamang.

Share:

admin

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ibu Guru Pasti Meleleh, Ini Puisi Hari Guru Nasional Berbagai Macam Peralatan Kantor Serta Fungsinya