Friday, July 15, 2011

Tutorial : Border keliling Content, Body and Sidebar.

Salam.Hari ni Dyh nak buat tuto.Tapi tuto senang senang dan tak adalah advance sangat keyh.Untuk newbies, sangatlah sesuai tuto saaya.:).As usual, tuto ni saya buat sendiri in case tak nak ada orang claim ini diorang punya.Saya tak kisah awak nak ambil, tapi never claim this is yours keyh.Dan saya dah test tuto ni terlebih dulu dekat test blog saya.:)
Content :
Taw tak yang mana content? Content yang kat bawah nih.Yang mengelilingi seluruh blog.Macam nih.

klik tuk obesity
Nampak tak keliling warna ungu tuh? Itulah border tuk content.Cara nak buat ni senang bangat deh! hehe..

  • Design/Edit HTML
  • Search word #content-wrapper {
  • Paste kod kat bawah ni keyh kat bawah kod #content-wrapper {
border: 2px solid #CC29A3;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
  • Boleh ditukar dengan pelbagai size.
  • Boleh ditukar dengan pelbagai jenis border disini.
  • Punn boleh ditukar.SINI.
  • jenis border boleh aje ditukar kat sini.   
Body post.
Kalau nak buat body post, tak payahlah buat border untuk content, buruuuk.:p.
  • Design/Edit HTML
  • Search word #main-wrapper {
  • Paste kod kat bawah ni keyh kat bawah kod #main-wrapper {
border: 2px solid #CC29A3;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
  • Boleh ditukar dengan pelbagai size.
  • Boleh ditukar dengan pelbagai jenis border disini.
  • Punn boleh ditukar.SINI.
  • jenis border boleh aje ditukar kat sini.   
ATTENTION! Korang kena preview dulu taww, kalau rasa lebar antara sidebar dan main wrapper besar sangat, korang adjust lah width dye taww, pandai pandailah preview and save! Huks.
Bila dah dipaste, die akan jadi cenggini.

klik obesity
ha tengok tuh, hanya bahagian post jer ada border.Sidebar takde kan? Kui kui.Padan muka ko sidebar! Haha...

Sidebar
Oleh kerana sidebar dah merajuk nak ada border, so kita tak nak bagi die merajuk kita bagi die border.

  • Design/Edit HTML
  • Search word  #sidebar-wrapper {
  • Paste kod kat bawah ni keyh kat bawah kod #sidebar-wrapper {
border: 2px solid #CC29A3;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
  • Boleh ditukar dengan pelbagai size.
  • Boleh ditukar dengan pelbagai jenis border disini.
  • Punn boleh ditukar.SINI.
  • jenis border boleh aje ditukar kat sini.   
So die akan jadi macam nih.


Sekarang fair and square.Dua dua dah ada border.Kechink! 

Korang cubalah buat ye.:)

4 comments:

nadzirah said...

x der code tu pun camana ekk

nurul hidayyah ♥♥ said...

@nadzirah oce ape yang takde eh? ni tuk washed/denim denim temp.:)

Nabilah Hashim ♥ said...

tak jadi pun :(

Khatijah Abdullah said...

At first xjadi tp, rupanya coding dah tukar la sis. Code yg sis bg kena paste dekat /*Posts (.main-inner {). Thank you sis for this tutorial. Sangat membantu :)