Cara membuat beberapa kolom gambar

Bagaimana cara membuat kolom gambar responsif pada blogger? Tips dan trik ini membuat beberapa kolom gambar atau foto pada blogger dengan menambahkan website responsif. 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, populer post, dan Link tekait setelah halaman post. Jika dibandingakan pada post sebelumnya, cara kedua ini sedikit banyak kode pada gaya CSS, tapi sobat dapat meringkas dan menghapus beberapa gaya CSS kode dibawah ini, jika merasa tidak diperlukan lagi penggunaan CSS di dalammnya.
Cara Membuat Beberapa Kolom Gambar
Apa saja Kode CSS yang diperlukan?
Pertama adalah Kode CSS yang sudah kami lampirkan di bawah. Gunakan code bootstrap.min.css! Link tujuan ini adalah untuk merespon btn tombol dan tipe font saja. Jika pada CSS style template sobat sudah terdapat kode perintah btn, sobat dapat mengunakan gaya CSS yang sudah tersedia.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
Untuk mengujinya sobat cukup menghapus CSS pada HTML Editor Area dan menggantinya dengan CSS dibawah ini. Copy dan paste kode CSS ini pada bagian CSS style dan HTML kode pada body template.
#epictravelersbanner{background-color:#fff;padding:0;margin-top:0;margin-bottom:0;overflow:hidden;position:relative;z-index:3}
#epictravelersbanner .admin_banblock ul{padding:0;margin:0;list-style:none;overflow:hidden}
@media (min-width:320px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul{margin:0}}
#epictravelersbanner .admin_banblock ul li{position:relative;padding:0;margin:0;background:rgba(51,51,51,0);overflow:hidden;transition:all .2s ease-in}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li{margin-bottom:0}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li{margin-bottom:0}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li{padding:0;width:100%!important;margin-bottom:0;min-height:1px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li{width:100%!important;margin-bottom:0;padding:0;min-height:1px}}

#epictravelersbanner .admin_banblockul li.animated{animation-fill-mode:inherit}
#epictravelersbanner .admin_banblockul li:before{transition:all .2s ease-in}
#epictravelersbanner .admin_banblock ul li.item-3 .caption .txt-e strong{color:#575F66}
#epictravelersbanner .admin_banblock ul li.item-3 .caption .txt-epic{color:#fff}
#epictravelersbanner .admin_banblock ul li a{display:block;overflow:hidden;position:relative;text-align:right;height:100%}
#epictravelersbanner .admin_banblock ul li a .banner_img{text-align:right;display:block}
#epictravelersbanner .admin_banblock ul li a .banner_img img{position:relative;top:0;right:0;width:100%;height:auto;opacity:1;transition:all .2s ease-in}

@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .banner_img img{width:100%}}
#epictravelersbanner .admin_banblock 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}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption{min-height:0}}
@media (min-width:320px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption{min-height:0}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-e{display:block;font-size:31px;line-height:32px;color:#276508;font-weight:400;text-transform:uppercase;padding:26px 0 0 40px;transition:all .2s ease-in}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;min-height:0}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:26px;min-height:0}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;padding:20px 0 0 20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;padding:20px 0 0 20px}}

#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:25px;line-height:50px;display:block;color:#fff;float:none;position:relative;top:0;font-weight:700;letter-spacing:0}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:36px;line-height:38px;letter-spacing:-2px}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:60px;line-height:68px;letter-spacing:0}#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{padding-left:20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:30px;line-height:32px;letter-spacing:0}#epictravelersbanner .admin_banblock ul li a .caption .txt-e{padding-left:20px}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px;color:#fff;font-weight:300;text-transform:none;display:block;padding:0 0 0 40px;max-width:570px}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{padding:10px 0 0 40px}}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:18px;line-height:25px}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px;padding:10px 0 0 20px}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-u{display:inline-block;text-transform:uppercase;border:none;font-size:21px;line-height:30px;font-weight:700;color:#fff;background:#171717;position:absolute;margin:0 40px;bottom:40px;transition:all .2s ease-in}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{font-size:18px;line-height:30px;padding:10px 20px}}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px;left:20px;font-size:18px;line-height:30px;padding:10px 20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{display:none}}
@media (max-width:767px) {#site-brand{display:none}#epictravelers-wow{display:none}}
#epictravelersbanner .admin_banblock ul li:hover .caption .txt-u{background:#276508}
#epictravelersbanner .admin_banblock ul li:hover img{opacity:.8!important}
#epictravelersbanner .mod_custom{overflow:hidden;width:100%}
#epictravelersbanner .mod_custom .custom > div{padding:0;min-height:490px;overflow:hidden}
Nah, jika sobat kurang nyaman menggunakan link pinjaman dari Bootstrap.css, Kami juga menyediakan kode (btn atau btn-primary) gunakan salah satunya untuk sobat coba pada template. Kami meringkasnya untuk sobat. Silahkan atur bagaimana fungsi gaya CSS ini pada (Padding) untuk menyesuaikan ukuran font dan warna yang menjadi kesukaan sobat.
.btn{float:right;cursor:pointer;display:inline-block;font-weight:700;text-transform:uppercase;border-radius:2px;padding:8px;color:#03A9F4;margin-top:10px;background-color:#171717}
Sobat juga dapat mengubah kode tersebut dari (padding:8px) menjadi (padding:8px 10px) untuk membedakan jarak atas-bawah dan rata kiri-kanan. (text-transform:uppercase) adalah huruf besar pada font, sobat dapat menghapusnya atau tidak sama sekali.
Bagimana kode HTML yang harus dilekatkan?
Kedua adalah kode HTML untuk menciptakan gaya-gaya template blogger tersebut menjadi lebih sempurna. Paste kode HTML di bawah pada bagian body. sobat juga dapat memanfaatkan kode ini untuk halaman post utama atau desain template yang kaya dengan fitur foto.
HTML dibawah ini sudah tersedia tiga kolom gambar untuk di ujicoba menggunakan HTML-Editor Area. Rata kiri dan kanan adalah 0px, sehingga fullscreen. Selain itu pertahankan menggunakan kode col-md-4 col-lg-4 col-sm-6 untuk gaya terpisah pada kolom.
<div id='epictravelersbanner'><div class='admin_banblock'><div class='module_content'><div class='banner_block content_first'>
<ul class='listing__banners'>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
</ul>
</div></div></div></div>
Jika langkah diatas sudah selesai, silahkan simpan template, kemudian pratinjau hasil editing sobat pada HTML. Sangat mudah bukan.
Apakah tutorial ini sudah diuji coba?
Iya nih : Cara Membuat Beberapa Kolom Gambar. Tips dan trik blog ini sudah kami coba di Editor Area adalah free editor, tips, trik blog, template blogger, HTML editor, CSS editor, dukungan JavaScript dan disediakan juga contoh kami membuat template dalam sekali pratinjau.
Semoga Bermanfaat, Terimakasih.
Tentang kami
EditorArea adalah cara kami untuk mengolah dan berkreasi dalam membuat template yang kami tambahkan untuk menyempurnakan template ataupun website kreasi kami. Harap di ketahui bahwa Editor Area ini tidak semua pengkodean dapat mendukung untuk versi Blogger template, silahkan kunjungi HelpSite kami untuk mengetahui lebih banyak. Harapan kami, tutorial yang kami sajikan dengan perhatian yang seringas-ringkasnya dapat mudah dimengerti dan dipelajari. Kritik, saran ataupun masukan pada post kami, sangatlah kami perlukan untuk belajar bersama-sama dan berkreasi bersama. Free reading untuk memberi perhatian penuh bersamamu. Semoga bermanfaat. Happy Reading.

No comments:

Kirim komentar ke teman

Informasi yang Anda berikan pada formulir ini tidak akan digunakan untuk apa pun selain mengirim komentar ke teman Anda. Fitur ini tidak akan digunakan untuk iklan atau promosi diri yang berlebihan.