Membuat Kotak Catatan Dengan Tombol Close di AMP & Non AMP

Diposting pada

Kotak Catatan Dengan Tombol Close di AMP & Non AMP

Membuat Kotak Catatan Dengan Tombol Close di AMP & Non AMP – Ada masa nya kita perlu menunjukkan Kotak Catatan Kecil di blog kita. Untuk menunjukkan isu kepada pengunjung yang tiba ke blog kita. Seperti ucapan selamat dikala hari-hari besar atau info perihal artikel terbaru yang kita mikiki.

Dan tutorial Cara Membuat Kotak Catatan Dengan Tombol Close Di Blog ini aku dapatkan dari Mas Mas Adhy Suryadi dan niscaya nya sahabat blogger sudah mengetahui nya dengan blog nya sudah populer yaitu kompiajaib.

Kotak catatan ini mampu kalian letakan di mana saja di blog Anda sesuai keperluannya. Misal di bawah header, di dalam postingan, atau di mana saja di dalam blog.

Mungkin kita eksklusif mulai tutorial yang aku akan berikan pada kesempatan kali ini, ikuti langkah – langkah berikut di bawah ini.

Membuat Kotak Catatan Dengan Tombol Close di AMP & Non AMP

Silahkan kalian copy kode css di bawah ini dan letakan kode tersebut di atas kode </style>

 .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="none"' role='button' tabindex='0'>×</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 &times; dengan &amp;times;

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'>×</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.

Itulah Cara Membuat Kotak Catatan Dengan Tombol Close Di Blog yang bisa kamu coba. Bila ada pertanyaan menyangkut isi dari artikel di atas, silahkan tinggalkan komentar kamu dibawah. Jangan lupa bagikan artikel ini ke teman teman di social media kamu bila dirasa bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *