Cara Membuat Ucapan Selamat Idul Fitri di Blog dengan Modal Box

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.

DEMO Ucapan Idul Fitri

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