Idul Fitri 1445 H sebentar lagi, saya ucapkan Minal 'Aidin wal Faizin, Mohon maaf lahir dan Bathin. Semoga Amal ibadah kita diterima oleh Allah SWT. Amiin.
Bagi rekan-rekan yang ingin menambahkan pernak-pernik ucapan Selamat Idul Fitri di Blog, silahkan lihat dulu DEMO, klik gambar Ketupat di samping kanan.
![idul fitri](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiJfilE-q4iprarC25Q6D9K5kBckxxqFM-UdgxhgD6Udss7Ato13-dYo4LNinF040Z9dwHTNElY3gjTCLEu7jAYk9-yrEb9uvKW4QEoJT1XCNs5SFGBT5CbobCm0sW-bVh5cR2mOwsr5wyfFvdOYMn1S7L4gy3VNpBo89V4dyC5gGUT9gtHPYWd2915_U/s1348/idul-fitri2.webp)
Membuat Ucapan Selamat Idul Fitri di Blog dengan Modal Box
Bagi yang tertarik silahkan ikuti langkah-langkahnya. Pertama, edit template kalian, simpan kode CSS ini di atas ]]></b:skin>
atau di atas </style>
/* Modal */
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .4);-webkit-backdrop-filter: saturate(180%) blur(10px);backdrop-filter: saturate(180%) blur(5px);transition: opacity .25s ease;z-index:99 !important;}
.modalInner {transition: top .25s ease;position: absolute;top: -20%;right: 0;bottom: 0;left: 0;width: 50%;margin: auto;overflow: auto;background: #fff;border-radius: 5px;padding: 2em;height: 45%;}
.modalInner h2{ margin-bottom:15px;}
.modalContent{display: flex;gap: 20px;flex-direction: row;}
.modalContent > p{width:50%}
.modalInner img {width:100%}
.modalClose {position: absolute;right: 1em;top: 1em;width: 1em;height: 1em;cursor: pointer;}
.modalClose:after, .modalClose:before {content: '';position: absolute;width: 2px;height: 1em;background: #ccc;display: block;transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
.modalClose:hover:after, .modalClose:hover:before {background: #aaa;}
.modalClose:before {transform: rotate(-45deg);}
.modalState {display: none;}
.modalState:checked + .modal {opacity: 1;visibility: visible;}
.modalState:checked + .modal .modalInner {top: 0;}
.modalBg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
.idlf{position:fixed;right:0;top:220px;background-image: url("https://tutorial.kang-ismet.com/img/ketupat2.png");background-color: #dedede;background-repeat: no-repeat;background-size: 90%;border-radius: 6px 0 0 6px;width:40px;height:40px;cursor:pointer;z-index:88 !important;}
/* Reponsive */
@media screen and (max-width: 1024px) {
.modalInner { width: 70%;height: 46%; box-sizing: border-box;}
}
@media screen and (max-width: 960px) {
.modalInner {width: 85%;height: 95%;box-sizing: border-box;}
}
@media screen and (max-width: 768px) {
.modalInner {width: 80%;height: 40%;box-sizing: border-box;}
.modalInner img {max-width: 90%;}
}
@media screen and (max-width: 480px) {
.modalClose{
top: 0.8em;right: 0.5em;}
.modalClose:after,.modalClose:before {height: 1em;}
.modalContent{flex-direction: column;}
.modalContent > p{width:100%;}
.modalInner img {max-width: 100%;}
.modalInner {height: 72%;}
h2 {font-size:1.4em}
}
@media screen and (max-width: 390px) {
.modalInner {height: 64%;box-sizing: border-box;}
}
@media screen and (max-width: 375px) {
.modalInner { width: 85%;height: 95%;box-sizing: border-box;}
}
Kedua, simpan Kode HTML ini di atas </body>
<label class='idlf' for='modal-1'/>
<input class='modalState' id='modal-1' type='checkbox'/>
<div class='modal'>
<label class='modalBg' for='modal-1'/>
<div class='modalInner'>
<label class='modalClose' for='modal-1'/>
<h2>Selamat Idul Fitri 1445 H</h2>
<div class='modalContent'>
<p><img alt='idul fitri' src='https://tutorial.kang-ismet.com/img/idul-fitri.webp'/></p>
<p>Admin <b>Blog Kang Ismet</b> mengucapakan <b>Selamat Hari Raya Idul Fitri 1445 H</b>. Semoga amal ibadah kita di Bulan Ramadhan diterima oleh Allah SWT. Mohon dibukakan pintu maaf yang seluas-luasnya apabila ada kata-kata atau tulisan yang kurang berkenan di hati sahabat.<br/><br/>Salam,<br/><strong>Kang Ismet</strong></p>
</div>
</div>
</div>
Ketiga,sesuaikan teks dengan blog kalian, simpan template dan selesai.
Bagi yang ingin memahami detail pembuatan Modal Box seperti ini silahkan kunjungi tutorial : Step by Step Membuat Modal Box Pure CSS tanpa JavaScript