Cara Menciptakan Kotak Catatan Di Blog
Membuat kotak catatan untuk di pasang di halaman depan blog ternyata banyak keuntungannya alasannya dengan adanya kotak catatan ini orang lain sanggup lebih cendrung membaca catatan yang kita tulis di kotak tersebut. Seperti contohnya anda ingin memberitahukan informasi penting atau inging mengungkapkan sesuatu kepada pengunjung. menyerupai contohnya di hari besar Lebaran, 17 Agustus, Tahun Baru atau lainnya.
Sekarang aku admin dari Cara menciptakan Kotak Catatan Di Blog ini dilengkapi juga dengan tombol close biar pengunjung sanggup kapan saja menghilangkan kotak sekaligus catatan tersebut apabila pengunjung tersebut merasa terganggu.
Contoh gambar Kotak Catatan diatas aku terapkan di header. Bila anda ingin menciptakan kotak tersebut sesuai dengan yang anda inginkan silahkan simpan eksklusif saja instruksi HTML yang sudah aku simpan dibawah ini yang strategis di blog anda.
Pertama pasang instruksi CSS berikut ini pada template blog anda.
Selanjutnya silahkan anda pasang instruksi HTML dibawah ini dimana daerah strategis di blog anda.
Jika tamat silahkan coba preview terlebih dulu template, sehabis berhasil tinggal anda SAVE template.
Sampai disini saja aku postingkan artikel Cara Membuat Kotak Catatan Di Blog, semoga bermanfaat terimakasi salam idsiteblog.com.
Sumber Post: Kang Adhi Kompiajaib Sumber https://www.idsiteblog.com/
Sekarang aku admin dari Cara menciptakan Kotak Catatan Di Blog ini dilengkapi juga dengan tombol close biar pengunjung sanggup kapan saja menghilangkan kotak sekaligus catatan tersebut apabila pengunjung tersebut merasa terganggu.
Contoh gambar Kotak Catatan diatas aku terapkan di header. Bila anda ingin menciptakan kotak tersebut sesuai dengan yang anda inginkan silahkan simpan eksklusif saja instruksi HTML yang sudah aku simpan dibawah ini yang strategis di blog anda.
Pertama pasang instruksi CSS berikut ini pada template blog anda.
.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}
.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}
Selanjutnya silahkan anda pasang instruksi HTML dibawah ini dimana daerah strategis di blog anda.
<div class='note gradient'>
<p>Selamat hari kemerdekaan Indonesia. Kami bangsa Indonesia dengan ini menyatakan Kemerdekaan Bangsa Indonesia. Mari bersatu membangun tanah air tercinta dengan semangat dan ilmu yang kita miliki. <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>
<p>Selamat hari kemerdekaan Indonesia. Kami bangsa Indonesia dengan ini menyatakan Kemerdekaan Bangsa Indonesia. Mari bersatu membangun tanah air tercinta dengan semangat dan ilmu yang kita miliki. <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>
Jika tamat silahkan coba preview terlebih dulu template, sehabis berhasil tinggal anda SAVE template.
Sampai disini saja aku postingkan artikel Cara Membuat Kotak Catatan Di Blog, semoga bermanfaat terimakasi salam idsiteblog.com.
Sumber Post: Kang Adhi Kompiajaib Sumber https://www.idsiteblog.com/
