December 5, 2013

Tutorial Sidebar Kotak Border


Assalamualaikum

Alhamdulilah, berkesempatan untuk memenuhi permintaan adik blogger yang dah lama nak sha buat tutorial ini, cantik dok sidebar kita..haha..so hari ni nak buat tuto simple dengan menggunakan photoshop..

Tutorial Buat Image Sidebar


Cipta kerawang, garisan yang korang suka letakkan atas sekali tu, jangan sampai memenuhi gambar tau
#kalau nak transparent, ubah backgound kepada transparent.. 


Buat border untuk body, letakkan selari dengan head sidebar
kemudian save sebagai head


untuk buat border hanya tukar saiz kepada 50px, caranya klik kanan pada atas kotak lukisan dan klik canvas size, kemudian save sebagai body


akhir sekali, buat footer, ikut design sendiri, kalau diatas ni, simple ja..kemudian save sebagai footer

done !! ambil url image (upload gambar disini) yang korang buat td..head,body dan footer, copy dan kita akan sambung untuk masukkan pula pada HTML

Tutorial Buat Sidebar


Buka TEMPLATE dan pergi  HTML, tick simbol anak panah, dan cari code Sidebar, dah jumpa copy code bawah ini dan gantikan code di bawah sidebar kamu..

sidebar h2 { font-size:16px; color: #ff88a7; text-shadow: 1px 1px 1px #000000; line-height:0.9em; text-align:center; padding:60px 30px 20px 30px; margin-bottom:-15px; font-weight:bold; background:url("url image -head"); background-repeat:no-repeat;background-position:center top;} -webkit-border-top-left-radius:14px; -webkit-border-top-right-radius:14px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; } .
.sidebar .widget{ margin-bottom:5px;margin-top:10px;padding:0 0 50px 0px;background:url(url image- footer); background-repeat:no-repeat;background-position:center bottom; }
.sidebar .widget-content { padding: 15px; background: url(url image- body) repeat-y; background-position: center; }

Save, dan siap !!
Semoga berjaya tauuu :P


4 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. menarik tapi macam susah je nak buat :)

    ReplyDelete
  3. tak pndai nak edit.. just basic je.. hehehe..

    ReplyDelete
  4. haiyaaa !! baru jumpe tuto yang real kite nak punya .. thanks !! sangat berguna ma .. kah kah ! dah jadi separuh cina dah malam ni .. : )

    ReplyDelete

Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)