Blog Request tutorial? klik disini!

  • 5 Langkah Mudah Membuat Sticky Notes Menggunakan HTML5 Dan CSS3

    Ditulis oleh: Faizal Ryza
    1086 kali dibaca
    31 Jan / 2014 14:47

    Hallo Dumenity, pasti sudah banyak yang tahu ya fungsi Sticky Notes pada Windows untuk apa?, ya fungsi Sticky Notes yang terdapat pada Windows berfungsi untuk membuat catatan Pekerjaan, No Telepon, Email dll. Nah Sticky Notes juga kita bisa buat pada HTML5 dan CSS3, fungsinya sama seperti Sticky Notes pada Windows. Caranya sangat mudah, mari kita bahas dan membuatnya bersama - sama.


    1. Kita akan menggunakan Software Adobe Dreamweaver CS6
    2. Kita buat File HTML5 baru dengan mengklik menu File > New, kita pilih Page Type HTML dan DocType HTML5 jika sudah klik Create

    sticky_notes_html5_css3_1

    sticky_notes_html5_css3_2

    3. Step 1 Kita buat Tag HTML seperti ini gambar di bawah :

    sticky_notes_3

    4. Step 1 lalu kita buat CSS seperti gambar di bawah ini :

    sticky_notes_4

    sticky_notes_5

    5. Step 2 lalu kita buat CSS seperti gambar di bawah ini :

    sticky_notes_6

    sticky_notes_7

    6. Step 3 lalu kita buat CSS seperti gambar di bawah ini :

    sticky_notes_9

    sticky_notes_10

    7. Step 4 lalu kita buat CSS seperti gambar di bawah ini :

    sticky_notes_11

    sticky_notes_12

    8. Step 5 lalu kita buat CSS seperti gambar di bawah ini :

    stickey_notes_13

    stickey_notes_14

    9. Jika Sudah kita preview ke Browser kita, lihat hasilnya Sticky Notes versi HTML5 dan CSS3 sudah jadi.

    stickey_notes_15

    Silahkan Mencoba. Berikut Link Source 5 Langkah Membuat Sticky Notes Menggunakan HTML5 dan CSS3 http://jsfiddle.net/Uk2HD/






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155