Gallery Tab itu adalah sejumlah photo yang di simpan pada sebuah tab dan apabila salah satu photo di klik akan menghasilkan view yang besar dan jernih. Contoh cobalah klik atau pencet (jika menggunakan layar sentuh) salah satu photo berikut di bawah ini:
Galeri gambar dengan Tab
Klik salah satu gambar berikut di bawah ini:
×
![]()
Bagaimana cara menerapkannya?
Cukup dengan masuk ke dasbor blog dan pilih "Compose HML"untuk membuat postingan baru, namun yang harus di pilih bukan melalui opsi "compose" tetapi pilihlah opsi "HTML"
 |
| compose and HTML |
<style>Ganti link gambar warna merah dengan link gambar kalian sendiri.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<div style="text-align:center">
<h2>Galeri Tab gambar </h2>
<p>Coba klik salah satu di bawah ini:</p>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZ44Z2js_qsyG_kYd55ekvY2Agc4r1sVPA94OshAD9rf7OGvXfX2BiA8j_nsuSuYui58EB7k_Hbu7zhVQ-cVQrKeYb5dVa7Xb1-H-wE9jLBi0Mn5HqJrn-I35UxFNYoqWUPRsNBya4QJL/s1600/IMG_20190916_061815.jpg" alt="Adelina Sofyan" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-pXOTUAFINZB3-KZ56tO8eunqF_RTjZZu5E4mu_e8DENajLW-bS0A3hVP-i10IryjJAtzqiBjoFSIspFlyPaWrLwzLEivLL7rMnsxQdYuaHKmLoshj3DSP9MoyllE-Ei3UlVWtc3vG6L6/s1600/IMG_20190915_175004-1208x910.jpg" alt="Anissa Auliasari" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgTt-cj6HtTzV1JPddjTa1no7LGnv-F5uCUEMpIB0HJMDK7Sf3T94W9qqa38Pa7QzOT0rrYuGKCBbUW3UgtjTj3JMqIjvq7Zvq81LbW47_ivCd8URfUp_FPzAwOe9NHjkSgYqtlbYc2jA/s1600/adel.jpg" alt="Adelina Sofyan" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpiOl2c2kxCbYjqNDsaangrva5LNjyzvNim46UggwboHFl2FImRQMxePL1S_8qVqStli-Z67xM-fArg4DrlFiBb0xhjhKcd_MPCeVHZmTCXK9TOzqDLCrkYXv8Y3u92WMlLJP3bAMxohw/s1600/sasa.jpg" alt="Anissa Auliasari" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Properti Gambar: Anissa Auliasari, Adelina Sufyan