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:
DEMOCatatan: Klik "RUN" yang berada tepat diatas halaman kode HTML agar demonya muncul dikanan lalu scrolling gambar melalui sentuhan atau mouse (lihat gambar):
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.
<!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>
- Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
- 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...
Saat lihat demonya saya kaget karena ada penampakan wajah saya.
BalasHapusSepertinya 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?
Jangan becanda kipudun.com itu cukup bagus prospeknya😊
Hapus