November 19, 2019

CARA MEMBUAT GALLERY TAB PHOTO KEREN DI HALAMAN BLOG

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:
Adelina Sufyan
Anissa Auliasari
Adelina Sufyan
Anissa Auliasari
×

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
compose and HTML
Letakan atau copy dan paste kode berikut di bawah ini ke dalam halaman opsi penulisan artikel mode HTML tadi:
<style>
* {
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://1.bp.blogspot.com/-rQJn7GknQ8k/XX7IzCq_BkI/AAAAAAAAoVc/gnSV7P2YpJ0i4fcYo6pKAJX3p-vBzYwywCLcBGAsYHQ/s1600/IMG_20190916_061815.jpg" alt="Adelina Sofyan" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://1.bp.blogspot.com/-uHiceJudrqw/XX4pSEhubjI/AAAAAAAAoVQ/px2GeVBxz00L65taDW00w0-Npc6rWQRWwCLcBGAsYHQ/s1600/IMG_20190915_175004-1208x910.jpg" alt="Anissa Auliasari" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://1.bp.blogspot.com/-ll_51xcI4GY/XX4cZODg8bI/AAAAAAAACcc/PrT229cK5XcTUeQvYeyliOvkR0aXZIYeACLcBGAsYHQ/s1600/adel.jpg" alt="Adelina Sofyan" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://1.bp.blogspot.com/-0OAUPewkfrU/XX4cPBizMoI/AAAAAAAACcY/pz8LemR97ygMG7VDsIfXG4oXSLC35iDCgCLcBGAsYHQ/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">&times;</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>
Ganti link gambar warna merah dengan link gambar kalian sendiri.
Properti Gambar: Anissa Auliasari, Adelina Sufyan

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist