Cara Membuat/Mengubah Lightbox Image di Blogger dengan CSS

Lightbox image merupakan salah satu fitur blogger yang digunakan untuk menampilkan gambar secara penuh.

Dengan adanya lightbox, gambar-gambar yang terdapat pada postingan blog dapat ditampilkan menjadi lebih baik dan jelas.

Cara Mengubah Lightbox Bawaan Blogger

Tanpa basa-basi, kali ini saya akan memberikan tutorial cara mengubah lightbox image pada bawaan blogger. Lightbox ini menggunakan CSS dan HTML saja tanpa perlu menggunakan Javascript atau jQuery, sehingga tidak terlalu mempengaruhi loading blog.

1. Masukkan CSS berikut di atas kode </style> atau </b:skin>

.lightbox_wrapper {
padding: 10px;
margin: 10px;
text-align: center;
}
a.lightbox img {
height: 100px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
}

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: #ffffff;
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid #ffffff;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
border-radius: 50px;
border: 1px solid #000000;
background: #ffffff;
color: #000000;
text-decoration: none;
position: absolute;
top: -80px;
right: 40px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: #000000;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: #000000;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

Untuk memasang lightbox pada artikel tertentu, Anda bisa menggabungkan Tag Kondisional pada kode CSS diatas.

2. Simpan Template
3. Masukan kode HTML berikut pada halaman posting artikel untuk mengubah tampilan lightbox

<div class="lightbox_wrapper">
<a class="lightbox" href="#image">
<img src="url gambar"/>
</a>
</div>
<div class="lightbox-target" id="image">
<img src="url gambar"/>
<a class="lightbox-close" href="#"></a>
</div>

Cukup mudah bukan? itulah cara membuat ataupun mengubah lightbox pada blogger, semoga bermanfaat.

Terimakasih