Pages

kode warna template

Hai sobat, pada kesempatan ini saya bahas kembali part 1 s/d 5 sudah beberapa hari ini saya mencari kesempatan agar dapat mengubah, memperbaiki ukuran elemen, margin dan sidebar, karena judul blog ini dengan cara step by step. blog ini juga akan menjadi catatan saya agar saya bisa melakukan bagaimana cara membuat tempalate sendiri, karena saya masih newbie makanya aga lama dan belum secara propesional


1. outer-wrapper
2. header-wrapper
3. main-wrapper
4. sidebar-wrapper
5. footer
Gambar ini menjelaskan kode css




jika anda sudah sampai pada part 5 silahkan anda save dan lihat blog beserta tata letaknya, saat ini saya ingin membuat sidebar kanan dan kiri, anda rubah status pada border anda dan warna agar kita sama-sama mengetahui dimana letaknya, saya sduah menjelaskan untuk mempelajari ukuran elemen di sini, 

ketika anda sudah menganti warna di dalam border, maka anda akan semakin mengetahui mana saja yang termasuk dalam kategori kode-kode elemen. contoh halnya seperti ini


Jika anda belum sampai saat ini, coba di pelajari tata letak pada kode css nya dan warna pada setiap kode css nya di bedakan ( masih belum saya selesaikan secara sempurna ), blog di atas adalah contoh ketika saya memulai usaha online strawberry :D

warna di dalam css adalah 

1. outer-wrapper:  border #00ff00 hijau stabilo, background: #cc6611 coklat 
2. header-wrapper : border: 1px solid red
3. main-wrapper : border: 1px solid #0000ff biru
4. sidebar-wrapper : border: 1px solid #6aa84f hijau gelap 
5. footer
body saya warnai siver  background:#eeeeee

untuk ukuran saya mash mencari yang tepat, silahkan anda ubah sesuai dengan keinginan anda, ubah masing di dalam border,pading,px,warna dll. agar mengetahui posisi-posisi header,outer,main,sidebar dan lain-lain.

pada gambar 1 adalah contoh posisi tata letaknya dan pada gambar 2 adalah contoh yang saya ubah hanya saja belum sesuai dengan keinginan saya sendiri.

Dengan cara membedakan warna maka kita akan mengetahui letak-letaknya. dari setiap ukuran masing-masing elemen. 

Semoga bermanfaat sobat blogger....

No comments :

Post a Comment