Salam Sobat Jaco, Jumpa Lagi Dengan Saya. Ok d Kali Ini Akan akan Berbagi Sedikit Trick CSS3 Buat Teman2 Semua. Apa Itu Tricknya..!!??
Hem.. Pasti Teman2 Semua Udah Pada Tahu Dong STICKY NOTE Atau Kalau Dalam Bahasa indonesianya Itu Artinya Catatan kecil Yang bisa Dikantongin Di Saku Celana, Y semacam Itulah.. Na Kali ini Kita Bukan Bahas Bisa Dibawa atau gaknya, tpi sesuai judul tutor saya hari ini tentang STICKY NOTES BY CSS3.
Langsung ja y Biar gak basi.. Ketikkan Kode CSS dibawah Ini tepat Dibawah Tag </head>
<style> .sticky { padding: 0 20px 20px 20px; border: 1px solid #DDD; border-top: none; border-left: none; width: 160px; min-height:150px; float: left; margin: 15px 0 15px 15px; background-color: yellow; font-size:16px; font-style:italic; line-height:1.5em; color: darkRed; } .sticky div{ background: url(https://lh3.googleusercontent.com/-mIyfkTDwcfE/UjKQZ0WJtwI/AAAAAAAAACM/gVt7z_heHEg/s47/Sticky.png) no-repeat; width: 47px; height: 41px; margin: -20px auto 10px auto; } </style>
Kalau Udah Kita Panggil Tag CSS di Bagian Body, Syntaknya Dibawah Ini :
<div class="sticky"> <div> </div> Isi Konten Teks Teman2 disini Isi Konten Teks Teman2 disini Isi Konten Teks Teman2 disini </div>
Langsung simpan Dengan nama Sticky Notes.html atau apa ja d trus double klik.
Kalau Sesuai dengan Script Diatas Maka Hasil seperti Gambar Dibawah Ini.
Buat Teman Yang pengen Ganti Warna Latar Belakangnya Bisa Diganti Dibagian background-color:yellow;
ganti jadi contoh : background-color:green. dan Kalau Mau Ganti Cantolan Pinnya Langsung Ja d kemari.
lh4.googleusercontent.com/-Wl2eo7OmU7M/UjKQdsm7gcI/AAAAAAAAACU/LIBKmdoO7tg/s47/Sticky1.png
lh4.googleusercontent.com/-BvzOvkTZXaQ/UjKQgqvz69I/AAAAAAAAACg/Jzl9hVmOWsI/s47/Sticky2.png
lh3.googleusercontent.com/-MSdSqNXW0Lc/UjKQggeeD1I/AAAAAAAAACk/BnqEmFzrTTs/s47/Sticky3.png
ok d sekian dulu tutornya mohon diperiksa jika ada kekeliruan dan akhir kata selamat mencoba...