Membuat Lightbox Image Tanpa Jquery(CSS Only)

Yeah akhirnya post yang kedua juga setelah kemarin postingan pertama saya di blog ini.

Oke, nah post kedua ini agak bingung nyari ide untuk postingan tapi saya pilih lightbox saja karena kemarin baru saya pasang lightbox di template ini dan rasanya tambah cool gitu deh...

Nah LightBox ini tanpa Jquery, Ingat!! tanpa Jquery. Jadi yang saya pakai ini hanya memakai CSS saja tanpa javascript atau lainya.

Silahkan Masuk ke Dashboard Blogger, pilih menu Template > Edit HTML

Cari kode "" .post-body img "" dengan tekan Ctrl + F, biasanya ada lebih dari 1 yang menurut anda benar letaknya

Dan paste kode ini didalam

user-select: none;pointer-events: none;background: #fff;height: auto;max-width: 98%;margin-bottom: 2px;padding: 10px!important;box-shadow: 0 0 0 1px rgba(0,0,0,0.030), 0 7px 20px 1px rgba(0,0,0,0.10);

.post-body img{paste disini}

jadinya seperti ini

.post-body img {user-select: none;pointer-events: none;background: #fff;height: auto;max-width: 98%;margin-bottom: 2px;padding: 10px!important;box-shadow: 0 0 0 1px rgba(0,0,0,0.030), 0 7px 20px 1px rgba(0,0,0,0.10);}

Lalu simpan template

Untuk melihat hasil, buka salah satu postingan anda, perhatikan di pinggiran image atau gambar terdapat shadow atau bayangan dari gambar, dan gambar terlihat lebih rapi.

Terima kasih, Good Luck!!