Cara membuat beberapa kolom gambar pada Website

Bagaimana cara membuat kolom gambar responsif? Tips dan trik ini adalah membuat beberapa kolom gambar atau merekatkan foto pada website. Pada post sebelumnya sudah ada tutorial "Cara Membuat Efek Gambar Pada HTML" responsif. Nah, dibagian ini tidak jauh berbeda pada post sebelumnya. Cara kali ini adalah meletakan beberapa kolom gambar menggunakan gaya "ul li".
Gaya ul li ini, biasanya digunakan pada widget label, dan populer post. Jika dibandingakan pada post sebelumnya, cara kedua ini sedikit banyak kode pada gaya CSS.

Bagaimana cara memulainya?

Siapkan kode CSS yang sudah kami lampirkan di bawah ini. Gunakan code bootstrap.min.css. Link tujuan ini adalah untuk merespon col-md saja.

<!-- Bootstrap CSS - HEAD Section -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

Jika pada CSS style template Anda sudah terdapat kode bootstrap Anda dapat mengabaikan CSS tersebut. Jika tidak tersedia element yang diperlukan atau mengurangi permintaan server dari Host lain, maka pada halaman ini juga melengkapi pengganti element col-md untuk membuat kolom gambar menjadi responsif. Copy dan paste kode CSS ini pada bagian CSS style.

/* RESPONSIVE MAIN LAYOUD BY BOOTSTRAP CSS */
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
@media (min-width:992px) {
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{width:66.66666667%}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{width:33.33333333%}
.col-md-3{width:25%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}}
/* AND RESPONSIVE MAIN LAYOUD */

/* Bagian: CSS Style */
body{margin:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}

#imgBox{background-color:#fff;padding:0;margin-top:0;margin-bottom:0;overflow:hidden;position:relative;z-index:3}
#imgBox .iblock ul{padding:0;margin:0;list-style:none;overflow:hidden}
#imgBox .iblock ul li:hover .btn-set{background:#171717;color:#fff}
#imgBox .iblock ul li:hover img{opacity:.8!important}
#imgBox .iblock ul li{position:relative;padding:0;margin-bottom:-5px;background:rgba(51,51,51,0);overflow:hidden;transition:all .2s ease-in}
#imgBox .iblock ul li a{display:block;overflow:hidden;position:relative;text-align:right;height:100%}
#imgBox .iblock ul li a .banner{text-align:right;display:block}
#imgBox .iblock ul li a .banner img{position:relative;top:0;right:0;width:100%;height:auto;opacity:1;transition:all .2s ease-in}
#imgBox .iblock ul li a .caption{position:absolute;top:0;display:block;font-size:0;left:0;line-height:0;width:100%;height:100%;text-align:left;transition:all .2s ease-in}
#imgBox .iblock ul li a .caption .text-label{display:block;font-size:17px;line-height:32px;color:#FFF;font-weight:400;text-transform:uppercase;padding:26px 0 0 40px;transition:all .2s ease-in}
#imgBox .iblock ul li a .caption .text-label strong{font-size:30px;line-height:50px;display:block;color:#FFC107;float:none;position:relative;top:0;font-weight:700;letter-spacing:0}
#imgBox .iblock ul li a .caption .text{font-size:16px;line-height:20px;color:#fff;font-weight:300;text-transform:none;display:block;padding:0 40px 0 40px;max-width:570px}

Tambahkan kode CSS btn dan silahkan atur bagaimana fungsi gaya CSS ini pada .padding untuk menyesuaikan ukuran tombol kesukaan Anda.

/* Button CSS Style */
.btn {
	display: inline-block;
	border: none;
	line-height: 30px;
	font-weight: 700;
	color: #171717;
	background: #FFC107;
	position: absolute;
	margin: 0 40px;
	bottom: 40px;
	padding: 2px 10px;
	transition: all .2s ease-in;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border-radius: 4px;
}

Kode HTML untuk menciptakan gaya-gaya template tersebut menjadi lebih sempurna. Paste kode HTML di bawah ini pada bagian body. Anda juga dapat memanfaatkan kode ini untuk halaman post utama atau desain template yang kaya dengan fitur foto.
HTML dibawah ini sudah tersedia 3 (tiga) kolom gambar untuk di ujicoba. Rata kiri dan rata kanan adalah 0px Selain itu pertahankan menggunakan kode col-md-4 dari Bootstrap.css untuk gaya terpisah pada kolom.

<!-- Bagian: HTML -->
<div id='imgBox'>
<div class='iblock'>
<ul>
<li class='col-md-4 banner'>
<a href='#' title='Image'>
<div class='banner'><img alt='Image' height='323' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' title='image' width='500' /></div>
<div class='caption'>
<div class='box-caption'>
<div class='text-label'>ujicode<strong>Title Post 1</strong></div>
<div class='text'>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div>
<div class='btn-set btn'>Keep Reading</div>
</div>
</div>
</a>
</li>
<li class='col-md-4 banner'>
<a href='#' title='Image'>
<div class='banner'><img alt='Image' height='323' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' title='image' width='500' /></div>
<div class='caption'>
<div class='box-caption'>
<div class='text-label'>ujicode<strong>Title Post 2</strong></div>
<div class='text'>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div>
<div class='btn-set btn'>Keep Reading</div>
</div>
</div>
</a>
</li>
<li class='col-md-4 banner'>
<a href='#' title='Image'>
<div class='banner'><img alt='Image' height='323' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' title='image' width='500' /></div>
<div class='caption'>
<div class='box-caption'>
<div class='text-label'>ujicode<strong>Title Post 3</strong></div>
<div class='text'>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div>
<div class='btn-set btn'>Keep Reading</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Akhir dari bagian HTML -->

Jika langkah diatas sudah selesai, silahkan simpan template, kemudian pratinjau hasil editing Anda pada HTML. Sangat mudah-kan.

Silahkan baca juga tentang: Cara membuat efek gambar pada website. Anda akan membuka judul ini di link baru.

Sekian tutorial tentang: Cara Membuat Beberapa Kolom Gambar Pada Website. Semoga bermanfaat.