Membuat Kotak Catatan Dengan Tombol Close Di Blog

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/15/2018

Membuat Kotak Catatan Dengan Tombol Close Di Blog - Terkadang kita sebagai admin blog perlu menyampaikan sesuatu hal kepada pengunjung, seperti sebuah pengumuman, catatan, atau sekedar ucapan selamat ketika hari-hari besar.

Pengumuman atau ucapan-ucapan tersebut sebaiknya kita tampilkan dengan sebuah kotak yang dibuat menarik perhatian, misal menggunakan background warna dan atau dengan border warna. Sehingga pengunjung tidak akan melewatkan pengumuman tersebut.

Namun kadang setiap orang itu berbeda. Mungkin saja kotak catatan tersebut tampilannya dianggap mengganggu. Untuk itu kita perlu memberikan sebuah tombol close agar mereka yang merasa terganggu dengan kotak catatan tersebut dapat dengan mudah menghilangkannya dari pandangan mereka.

Membuat Kotak Catatan Dengan Tombol Close Di Blog - Kotak catatan dengan tombol close ini seperti yang saya gunakan untuk ucapan selamat Hari Lebaran, atau mungkin akan digunakan untuk hal lainnya ke depan.

Post ini saya buat karena beberapa sahabat Kompi meminta dibuatkan cara untuk menampilkan kotak catatan seperti yang saya gunakan.


Kotak catatan ini bisa disimpan di mana saja di blog Anda sesuai keperluannya. Misal di bawah header, di dalam postingan, atau di mana saja di dalam blog.

Kotak notifikasi alert dengan tombol close atau tombol hide ini saya buat dengan beberapa warna background agar bisa dipilih sesuai selera atau di sesuaikan dengan warna blog. Atau mungkin Anda ingin menampilkan beberapa kotak catatan ini di beberapa tempat dengan warna-warna yang berbeda.


Jika Anda 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, silahkan atur margin pada CSS .note dan untuk background .gradient silahkan sesuaikan selera Anda, bisa buat gradient background di http://www.colorzilla.com/gradient-editor/

Kemudian untuk menampilkannya, gunakan kode HTML berikut:

1. Untuk Non AMP

<div class='note gradient'>

  <p>Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah 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 kode gradient dengan red, pink, purple, indigo, blue, cyan, teal, green, yellow, orange, brown, atau grey. Jika disimpan di edit HTML, silahkan ganti kode × dengan ×

2. Untuk AMP

<div class='note gradient' id='note'>

  <p>Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah 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 jika 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.