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 == "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>
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
<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:
- img alt: Gunakan kata kunci
- height: ukuran tinggi gambar harus sama dengan yang lainnya
- width: ukuran lebar gambar harus sama
- src: isi dengan url gambar tujuan
- keterangan gambar 1&2: isi dengan keterangan gambar masing-masing
