Cara Membuat Note Dengan Tombol Close di Blog Valid AMP

Cara Membuat Note Dengan Tombol Close di Blog Valid AMP - Note atau Kotak Catatan merupakan komponen atau widget yang sebenarnya wajib ada pada setiap blog, karena widget ini akan sangat membantu pemilik blog untuk manaruh catatan atau informasi yang berkaitan dengan postingan tersebut. Contohnya seperti ini :


Note atau kotak catatan diatas sudah valid amp, karena tidak lagi menggunakan javascript tambahan dalam pemasangannya. Selain itu note atau kotak catatan tersebut dapat anda close, sehingga tidak akan mengganggu pandangan anda dalam membaca postingan tersebut.

Selain di pasang di postingan, note atau kotak catatan ini juga dapat dipasang di bagian lain dari blog anda, misalnya dibawah header atau diatas header. Note atau kotak catatan ini dapat anda gunakan untuk memberikan informasi atau pemberitahuan yang berkaitan dengan halaman tersebut, maupun hanya sekedar memberikan ucapan ucapan selamat ketika hari hari besar kepada para pengungunjung blog anda.

Widget note atau kotak catatan ini telah saya terapkan di template terbaru saya, yaitu Alpha AMP Template, yang tampilannya kurang lebihnya seperti ini :

Cara Membuat Note Dengan Tombol Close di Blog Valid AMP

Simpan CSS berikut ini pada custom-style template blog anda.

.note{background:#fef4e6;padding:2px 20px 2px 5px;margin:0;font-size:16px;font-weight:400;position:relative;color:#f72762;border:2px solid #f72762;border-radius:3px}
.note .close-note{position:absolute;top:2px;right:0;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:0.5;color:#f72762;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}

Ubah warna sesuai dengan keinginan anda.

Kemudian untuk menampilkan Note di postingan (HTML Mode), silahkan gunakan kode HTML dibawah ini.

<div class="note" id="note"> ... tulis kata kata disini ... <br /> <div aria-label="Close Note" class="close-note" on="tap:note.hide" role="button" tabindex="0"> ×</div> </div>

Anda tinggal memasang kode tersebut ditempat lain, jika ingin memasang widget note atau kotak catatan tersebut di tempat lain.

Sekian pembahasan singkat saya mengenai Cara Membuat Note Dengan Tombol Close di Blog Valid AMP, semoga dapat bermanfaat bagi anda semua, selamat mencoba... ^_^.