Membuat Kotak Catatan Ala Kompi Asing Dengan Warna Gradient

Membuat Kotak Catatan Ala Kompi Ajaib Dengan Warna Gradient - Sebagai admin blog terkadang ingin memberikan pesan kepada pengunjung. Entah itu pesan singkat, pesan pengumunman, atau pesan lainya yang ingin kita sampaikan untuk pengunjung blog kita.

Pada waktu yang kemudian aku sudah posting Membuat Gradasi Warna Pada Background Blog. Kali ini Saya akan coba posting Membuat Kotak Catatan Ala Kompi Ajaib Dengan Warna Gradient.

Kotak catatan ini juga di lengkapi dengan tombol Close, jadi kalau pengunjung terasa terganggu dengan kotak catatan ini, pengunjung dapat menyembunyikan kotak catatan tersebut.

Kotak notifikasi alert dengan tombol close atau tombol hide ini dibentuk dengan beberapa warna background biar dapat dipilih sesuai selera atau di sesuaikan dengan warna blog sobat. Atau mungkin teman ingin menampilkan beberapa kotak catatan ini di beberapa daerah dengan warna-warna yang berbeda.

Untuk demonya, silahkan klik pada tombol dibawah ini.

Jika teman tertarik untuk mencobanya, silangkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan CSS berikut ini.

 .note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
 .note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
 .note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
 .note b,.note a{font-weight:500;}
 .note .close-note:hover{opacity:1}
 .note .close-note:focus,.note .close-note:active{outline:0}
 .gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
 .red{background:#E53935}
 .pink{background:#D81B60}
 .purple{background:#8E24AA}
 .indigo{background:#3949AB}
 .blue{background:#1E88E5}
 .cyan{background:#00ACC1}
 .teal{background:#00897B}
 .green{background:#43A047}
 .yellow{background:#FDD835}
 .orange{background:#FB8C00}
 .brown{background:#6D4C41}
 .grey{background:#546E7A}

Untuk mengatur jarak dengan elemen lain, teman dapat mengatur margin pada CSS .note dan untuk background .gradient silahkan sesuaikan selera sobat.

Kemudian untuk menampilkannya, gunakan aba-aba HTML berikut:

1. Untuk Non AMP

 <div class='note gradient'>
   <p>Berbuat khilaf yaitu sifat. Meminta maaf yaitu kewajiban. Dan kembalinya Fitrah yaitu tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. <b>Selamat hari raya Idul Fitri, 1 Syawal 1439 H.</b></p>
 <div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
 </div>

Silahkan sesuaikan/ganti kalimatnya. Untuk mengganti warna background silahkan ganti aba-aba gradient dengan red, pink, purple, indigo, blue, cyan, teal, green, yellow, orange, brown, atau grey. Jika disimpan di edit HTML, silahkan ganti aba-aba × dengan &times;

2. Untuk AMP

 <div class='note gradient' id='note'>
   <p>Berbuat khilaf yaitu sifat. Meminta maaf yaitu kewajiban. Dan kembalinya Fitrah yaitu tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. <b>Selamat hari raya Idul Fitri, 1 Syawal 1439 H.</b></p>
 <div aria-label='Close Note' class='close-note' on='tap:note.hide' role='button' tabindex='0'>&times;</div>
 </div>

Untuk AMP tambahkan id='note' dan kalau menampilkan beberapa kotak maka masing-masih harus dengan ID yang berbeda, misal id='note1', id='note2', dan seterusnya. Untuk bacground warna sama dengan yang untuk Non AMP.

https://mamankdzgn.blogspot.com//search?q=membuat-kotak-catatan-dengan-tombol