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
This comment has been removed by a blog administrator.
ReplyDeletemenarik tapi macam susah je nak buat :)
ReplyDeletetak pndai nak edit.. just basic je.. hehehe..
ReplyDeletehaiyaaa !! baru jumpe tuto yang real kite nak punya .. thanks !! sangat berguna ma .. kah kah ! dah jadi separuh cina dah malam ni .. : )
ReplyDeletePost a Comment
Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)