Cara Membuat Kotak Note Pada Blogger Dengan CSS3

Cara Membuat Kotak Note Dengan CSS3.

 Sudah Beberapa Minggu Diriku Tidak Update Tutorial Tentang CSS :D #lebay. KuCoba Mencari Insfirasi dan Dapat Juga :D . Ini Dia Ku persembahkan Untuk Sobat Cara Membuat Kotak Note Dengan CSS3 . Dan Seperti Biasa Saya Tidak Akan Banyak CingCongBrow :D Kita Langsung Aja Ke Tutorialnya, Eitss Sabar Sebelum Ke Tutorialnya Saya Mau Kasih Dulu Scriptnya :D .

HTML:

<textarea>Cara Membuat Kotak Note Dengan CSS3.</textarea>

CSS:

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah); * { box-sizing:border-box; } textarea { display: block; padding:25px 25px 40px; margin:0 auto 20px auto; width:250px; height:250px; font:20px 'Gloria Hallelujah', cursive; line-height:1.5; border:0; border-radius:3px; background: -webkit-linear-gradient(#F9EFAF, #F7E98D); background: -moz-linear-gradient(#F9EFAF, #F7E98D); background: -o-linear-gradient(#F9EFAF, #F7E98D); background: -ms-linear-gradient(#F9EFAF, #F7E98D); background: linear-gradient(#F9EFAF, #F7E98D); box-shadow:0 4px 6px rgba(0,0,0,0.1); overflow:hidden; transition:box-shadow 0.5s ease; font-smoothing:subpixel-antialiased; max-width:520px; max-height:250px; } textarea:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); } textarea:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; }

      

Udah Liatkan Scriptnya ? :D ,, Sekarang Kita Lanjut Ke Pemasangannya :D .


1. Login Ke Akun Blogger Sobat.
2. Siapkan Text Yang Ingin Di Masukan Ke Dalam Kotak Note.
3. Jika Text Sudah Di Sediakan Contoh Text : Cara Membuat Kotak Note Dengan CSS3 : Simpan Text Tersebut Di Atara :


<textarea></textarea>


Maka Akan Terlihat Seperti :


<textarea>Cara Membuat Kotak Note Dengan CSS3</textarea>


4. Jika Sudah Seperti Itu Tambahkan Kode CSS Yang Di Atas Maka Jika Di Tambahkan Dengan CSS akan Terlihat Seperti :


<textarea>Cara Membuat Kotak Note Dengan CSS3</textarea>


<styele>

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
* { box-sizing:border-box; }


textarea  { 
display: block;
padding:25px 25px 40px;
margin:0 auto 20px auto;
width:250px;
height:250px;   
font:20px 'Gloria Hallelujah', cursive; 
line-height:1.5;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: linear-gradient(#F9EFAF, #F7E98D);
box-shadow:0 4px 6px rgba(0,0,0,0.1);
overflow:hidden;
transition:box-shadow 0.5s ease;
font-smoothing:subpixel-antialiased;
max-width:520px;
max-height:250px;
}


textarea:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); }
textarea:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; }

</style>


dan Hasil Dari Kode Di Atas Akan Terlihat Seperti :


Cara Membuat Kotak Note Dengan CSS3.

5. Selesai ^_^ .


NB.


- width:250px; Kode Ini Adalah Kode Lebar Dari Note Tersebut Jika 
  Sobat Ingin Menambah Lebar Notenya Sobat Tinggal Menambah
  Ukurannya Contoh Dari width:250px; Menjadi width:280px;.
- height:250px; Kode Ini Adalah Kode Panjang Dari Note Tersebut
  Jika Sobat Ingin Menambah Panjang Notenya Sobat Tinggal 
  Menambah Ukurannya Contoh Dari height: 250px; Menjadi height: 280px;.

( Dan Yang Lainnya Silahkan Edit Dengan Kesukaan Sendiri Dan Berkreasilah :D )

Selamat Mencoba dan Good Luck ^_^
Oya Jangan Lupa Komen Dan Follow Blognya Ya :D Thanks.