1. **Persiapkan Struktur HTML AMP:**
amp di tag <html> dan menyertakan skrip AMP di bagian <head> halaman Anda. Contoh dasar struktur HTML AMP adalah sebagai berikut:2. **Tambahkan Note dengan Tombol Close:**
<amp-bind> dan <amp-state> untuk mengatur visibilitas note. Berikut adalah contoh kode HTML untuk membuat note:3. **Uji Halaman AMP:**
“Note” atau kotak catatan diatas yang tentunya sudah valid amp, karena tidak lagi menggunakan javascript tambahan dalam pemasangan tempelate tersebut. Selain itu, juga note atau kotak catatan tersebut dapat sobat close, sehingga tidak akan mengganggu pandangan sobat dalam membaca artikel tersebut.
Note atau Kotak Catatan adalah komponen atau widget yang sebenarnya wajib ada pada setiap website/blog menggunakan platfrom blogger, karena dengan widget ini akan sangat membantu bagi pemilik blog untuk manaruh catatan atau informasi yang berkaitan dengan 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 Tema Blogger 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"> ... silahkan 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.
