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