CARA MEMBUAT GAMBAR BERGULIR DENGAN HTML

Halaman blog jadi lebih menarik dengan berbagai elemen desain, salah satu kelebihan blog modern adalah mampu menampilkan gambar gambar dengan tampilan responsive dan menawan salah satunya gambar bergulir. Cara ini bukan hanya dapat menghemat ruang tapi juga menghemat bandwith, Untuk melihat contoh silahkan klik demo dibawah ini namun perhatikan instruksi gambar terlebih dahulu:
DEMO
Catatan: Klik "RUN" yang berada tepat diatas halaman kode HTML agar demonya muncul dikanan lalu scrolling gambar melalui sentuhan atau mouse (lihat gambar):
klik run diatas halaman html untuk melihat efeknya

CARA PENERAPAN:

  • Masuk kepengaturan blogger
  • Pilih Tema
  • Pilih tombol edit HTML
  • Cari kode kode utama: <body>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.
Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru, Merah
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* Full height */
height: 50%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Images used */
.img1 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zOOQQTA6vQED9BRPiJEIaHPQtvZvvjsePdUrGzmwS0QQbbsdrZs-9QCdcXxCPqGgA6BXR9IK5HuZrJWV_6F2zN6y-Ud6mb1SFVgu7sqsWzEviuluvmpeJYhZjQ8_SY39nILy88olgCDS/s1600/20190113_182104_rmedited.webp"); }
.img2 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgvuCJgaPvboQlUEW0CuELDq_SuzPfjMpB8xEpyLfScF0THWSZ_9Ac9KXRnZxxOnCJ0A7qyqTu8vNa5NMZVSvk9aDbIMNjSuupfv8PzqP24lgEAipllnMpO1ivagbGGaREjiJSREw_O8hX/s1600/Screenshot_20190212-194649.webp"); }
.img3 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMW5tXaEbF9KQev_bRYeb_qfenGbuPLzgXrGT49uy_PWXamfjrGKwFiC-fT8nbIYngGVWNeAKtbRv2y-6wIxEsiLEytnVigafDbgUd2J327QMF2PlBoJjDqom9o2hQBwAF-5C5bvEl6Qg/s1600/Screenshot_20190207-192518.webp"); }
.img4 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaKbMGxLcgR0gT1B2BogJijtQn-ndoT8ghOcKzJxfLZf36LHRu5mLZXbqdq4FI4JCdMZlPZCsCs_PqZ1M4eX30zwxojOr-spnnEjGdVLAmfHRphqXzG0cpN2bUI6DRfpy-gcXFuLWcSACg/s1600/Screenshot_20190205-180110.webp"); }
.img5 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9XUCinzzgA3wTrx_2r68bUIh5UYb9N84AQUiIQdgpKDccI8EyPNV9o0fFjpqgYtr0R9WXVFRQIWzeVhoj7Q3IGdeBDajNJwZE0FQxIHWKtQu_g0vP0W5ex7n0LwNtTN_hLHa8b8nwJTh/s1600/20190117_201040_rmedited.webp"); }
.img6 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJP1B9V1pFVTN-_2h0Btuy1NbBhK9cZsjHFHaEJh65TYvDbNmwyx-2XjDCwFG4BOZOYQoi_tMOR8m3K4Z-PW75wyTJ7MZArdcy7HdOnM0jrGWLhACJIa8JnE0KEofTLXslT2EXgQS1oIai/s1600/samsung.webp"); }
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}
</style>

</head>
<body>
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div class="bg-text">gulir</div>

</body>
</html>
  1. Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
  2. Kode kode yang saya sorot warna merah seluruhnya harus diletakan dibawah kode <body> atau diatas kode tag penutup </body>
Save template. 
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...


www.editblogtema.net

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Saat lihat demonya saya kaget karena ada penampakan wajah saya.

    Sepertinya ini dibisa di terapkan di halaman home page sebagai ganti efek paralax.. Sayangnya lebih banyak pengunjung yang langsung ke artikel daripada buka home page.. Ups apa ini disebabkan blogku belum nempel di hati pengunjung?

    BalasHapus
    Balasan
    1. Jangan becanda kipudun.com itu cukup bagus prospeknya😊

      Hapus
Lebih baru Lebih lama

Formulir Kontak