Membuat kotak catatan untuk di pasang di halaman depan blog ternyata banyak manfaatnya karena dengan adanya kotak catatan ini orang lain bisa lebih cendrung membaca catatan yang kita tulis di kotak tersebut. Seperti misalnya anda ingin memberitahukan informasi penting atau inging mengungkapkan sesuatu kepada pengunjung. seperti contohnya di hari besar Lebaran, 17 Agustus, Tahun Baru atau lainnya.
Sekarang saya admin dari idsiteblog.com memberikan Cara membuat Kotak Catatan Di Blog ini dilengkapi juga dengan tombol close agar pengunjung dapat kapan saja menghilangkan kotak sekaligus catatan tersebut apabila pengunjung tersebut merasa terganggu.
Contoh gambar Kotak Catatan diatas saya terapkan di header. Bila anda ingin membuat kotak tersebut sesuai dengan yang anda inginkan silahkan simpan langsung saja kode HTML yang sudah saya simpan dibawah ini yang strategis di blog anda.
Pertama pasang kode CSS berikut ini pada template blog anda.
Selanjutnya silahkan anda pasang kode HTML dibawah ini dimana tempat strategis di blog anda.
Jika selesai silahkan coba preview terlebih dulu template, setelah berhasil tinggal anda SAVE template.
Sampai disini saja saya postingkan artikel Cara Membuat Kotak Catatan Di Blog, semoga bermanfaat terimakasi salam idsiteblog.com.
Sumber Post: Kang Adhi Kompiajaib
Sekarang saya admin dari idsiteblog.com memberikan Cara membuat Kotak Catatan Di Blog ini dilengkapi juga dengan tombol close agar pengunjung dapat kapan saja menghilangkan kotak sekaligus catatan tersebut apabila pengunjung tersebut merasa terganggu.
Contoh gambar Kotak Catatan diatas saya terapkan di header. Bila anda ingin membuat kotak tersebut sesuai dengan yang anda inginkan silahkan simpan langsung saja kode HTML yang sudah saya simpan dibawah ini yang strategis di blog anda.
Pertama pasang kode 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 kode HTML dibawah ini dimana tempat 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 selesai silahkan coba preview terlebih dulu template, setelah berhasil tinggal anda SAVE template.
Sampai disini saja saya postingkan artikel Cara Membuat Kotak Catatan Di Blog, semoga bermanfaat terimakasi salam idsiteblog.com.
Sumber Post: Kang Adhi Kompiajaib
Advertisement
