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/AVvXsEiirMrbhSOuSZ_8zgcIvoiHABxOUyLW1fg6zWBUTRUL3EUHr2362YqI44EsUZtPW-j-jOi9fqHGPDlJtSXQ2s_W2dPikZKoEjFg4q1rhHMmBXbFDtxuw5dHhYm3Wf7-yXqqsLmC1lMbrozw/s1600/20190113_182104_rmedited.webp"); }
.img2 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsaN67fXfUY0GtNBsfVIdX-sIOedYdKE_F9sSaz4ZXF1p0e0Qn4wF3IOaWBekmwTZB41z23duz46y9al39uoSFMi7GZylEDfCk5ekZ_WzJevYl1K8YzTZ7uK-RAVGB4Sne_qmTNpMCusn/s1600/Screenshot_20190212-194649.webp"); }
.img3 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUtTTloG84B0AYLgfhK0pH0BlYrSWFA7gWOa0vj0SwVmnH6iRd2697VLgOAuYPjMfv3hi19SkbIJyvZUTMb-Pr5Lladt-MW7b5QF7ZDWPl4kZ-inw7XnpyNpDY4BxoTDvBX2370dzXS0CO/s1600/Screenshot_20190207-192518.webp"); }
.img4 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgha2l2IDDg5PU4tlVnxGPg3XjWUbDCZQceY82prbfexxsfFiNOh92Lrvx_v7X2uogQ_BKcIxVbA-KSKjOLYSzEd8I6PLcpqg9ZVI9BBSW5g7Qn5fg5NW5x4a55VoNN87dfu68FvBtW-nR/s1600/Screenshot_20190205-180110.webp"); }
.img5 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikf4_yoytSXMYfQ4laQofXpeX5RhyHRs3z4tDqNFubwRfkRpWv5EyGvkbJx0UZlBvmSR8LSzenI9xvNBlQJJctYaw433WI5ChPs2isSd2YAaJqhf4mp6qMwUKXtfbt9UsUGSXAYiwZv6zM/s1600/20190117_201040_rmedited.webp"); }
.img6 { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYJlVL-Q4-xuyrNJgppIsM1dOKjoDjw3YPt1U9zsrQTcW65qEVNLR6iJ-iLroXo_r8L10o56TjJEnIPBV9OgIUe6XA07ubXeeuG5QVtcxbGhRUMcHq1vP7yxOSRdPBI781ZYblKXi86Yx/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...