Cara Membuat Beberapa Kolom Gambar

Image
Tips membuat beberapa kolom gambar atau foto pada blog atau 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 metode kode "ul li". Jika dibandingakan pada post sebelumnya, cara kedua ini sedikit banyak kode pada gaya CSS, tapi anda dapat meringkas dan menghapus beberapa gaya CSS kode dibawah ini. Pertama: Kode CSS Gunakan code bootstrap.min.css! Link tujuan ini adalah untuk merespon btn tombol dan tipe font saja. Jika pada CSS style template anda sudah terdapat kode perintah btn, anda dapat mengunakan gaya CSS yang sudah tersedia.
Copy dan paste kode CSS ini pada bagian CSS style. #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:hi…

Cara Membuat Efek Gambar Pada HTML

Image
Bagimana cara membuat Efek Gambar pada HTML? Dibawah ini sekedar contoh cara membuat Efek Gambar pada HTML. Efek gambar ini akan aktif saat cursor terletak pada area gambar dan menampilkan efek slide lembut dan sempurna. Ini lebih mudah, karena tidak menggunakan JavaScript untuk menciptakan efek interaktif pada browser web. Kelebihan Kode ini sangat cocok untuk mempercantik tampilan web, seperti: travel, properti dan mancakup desain template yang kaya dengan fitur foto. Kelebihan efek gambar ini dilengkapi dengan latar belakang transparan disertai judul, snippet post dan tombol link yang mengarah pada artikel tertentu. Tentunya responsif untuk digunakan pada HTML. Gunakan kode CSS dan HTML di bawah ini. Pertama: Kode CSS Copy dan paste kode CSS ini pada bagian CSS style. Jika HTML anda sudah terdapat h1 h2 h3 ... dan seterusnya, silahkan hapus item dibawah ini. body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif} #page-events{background:#212121;color:white} a{color:#ffffff;te…