Membuat Kotak Catatan di Blog » Membuat Kotak Catatan Dengan Tombol Close di Blog sesungguhnya bukanlah hal yang wajib kau ketahui, namun sebagai admin blog kita harus memberikan suatu hal yang penting kepada pengunjung atau hanya sekedar menunjukkan catatan di artikel tententu kita.
Agar catatan atau ucapan yang kita buat dibacaoleh pengujung blog, Kita harus mendesainya dengan sedemikian rupa, menyerupai memakai background, memakai text yang bewarna Sehingga pengunjung tidak akan melewatkan pengumuman tersebut.
Sifat insan itu berbeda-beda, ada yang menganggap kalau kota catatan itu penting dan adapula yang menganggap kotak catatan yang kita buat itu mengganggu pandangan mereka, Nah untuk mengatasi sifat yang berbeda-beda tersebut kita juga harus menyisipkan tombol close di kotak catatan tersebut.
Biasanya para blogger memakai kotat catatn ini untuk memperingati hari-hari besar menyerupai dikala ini agustus 2018 yang bersamaan dengan asian game dan juga ultah NKRI.
Berhubung sebentar lagi ialah hari ulang tahun negara kita tercinta, Mari kita berikan sambutan kepada pengunjung blog kita dengan Membuat Kotak Catatan Dengan Tombol Close di Blog.
Kotak catatan yang akan admin share ini dapat kau letakan dimana saja yang kau mau, Misal di bawah header, di dalam postingan, atau di mana saja di dalam blog.
Selain itu pada artikel Membuat Kotak Catatan Dengan Tombol Close di Blog ini aku membuat dengan beberapa warna background supaya dapat dipilih sesuai selera atau di sesuaikan dengan warna blog anda.
Kurang lebih nanti akhirnya akan menyerupai ini.
Gimana? bila kau tertarik untuk membuatnya, silahkan simak ulasan dibawah ini.
Cara Membuat Kotak Catatan di Blog Dengan Tombol Close
Silahkan simpan CSS berikut ini.
.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, dapat buat gradient background di halaman berikut ini.
1. Non AMP
Untuk menampilkanya, Kamu hanya perlu menggunakan kode HTML berikut ini.
<p>Berbuat khilaf ialah sifat. Meminta maaf ialah kewajiban. Dan kembalinya Fitrah ialah tujuanku. Saya 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 isyarat gradient dengan red, pink, purple, indigo, blue, cyan, teal, green, yellow, orange, brown, atau grey. Jika disimpan di edit HTML, silahkan ganti isyarat × dengan &times;
2. AMP
Jika kau memakai template AMP, Silahkan gunakan isyarat ini.
<p>Berbuat khilaf ialah sifat. Meminta maaf ialah kewajiban. Dan kembalinya Fitrah ialah tujuanku. Saya 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 bila 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.
Nah itulah panduan mudah Cara Membuat Kotak Catatan Dengan Tombol Close di Blog, Semoga Bermanfaat.
Sumber aciknadzirah.blogspot.com