8 Mei 2012

Content-Wrapper Berborder Bunga



 Ni request dari Myra so Aini cuba laksanakan lah.Mudah-mudahan Myra n yang lain-lain boleh faham.
Gambar ni diambil dari blog testing
Lihat anak panah yg ditunjukkan dlm kotak hijau .Itulah yg dimaksudkan Myra bagaimana Aini buat body content wrapper ada corak.

Mari lihat tutorial berpandukan pengalaman Aini sendiri.
Sebelum tu korang harus design sendiri background untuk content wrapper dengan menggunakan Photoshop.



  • Buka Adobe Photoshop :  File >New > akan keluar seperti gambar di atas.Saiz file(dlm kotak merah) harus mengikut kesesuaian width wrapper content blog masing2.

Contoh Aini punya saiz width wrapper content adalah 790px.Tapi Aini letak width 850px.Height tu ikut koranglah nak berapa tapi better 400px or 500px ikut selera ok.


  • Lepas tu korang cari lah gambar background ape yg korang nak letak.Kemudian open gambar yang dipilih tadi.

  • Drag gambar yg nak buat background tadi ke New file yg dh buat tadi.Kemudian drag plak gambar yg nak letak sebagai border.Ikut kreativiti sendiri lh.Nti jd seperti gambar kat atas.Selesai korng save dalam file Save for web and Devices preset png-24.
  • Dan siap mcm biasa upload gambar yg di save tadi dan amik url image nya..



  • Pergi ke Dashboard > Design > Edit HTML cari kod content-wrapper {
  • Kemudian copy kod ini ;
background-url: ('URL IMAGE');
  • Dan Paste kan di bawah kod content-wrapper{
  • Gantikan perkataan Url Image tu dengan Url Image yg korang dah upload td.Siap preview dulu tgk menjadi ker x.Okay dah puas hati baru SAVE.Begitu lah yg Aini buat untuk blog.
Note: Aini buat berdasarkan idea sendiri,So klu cam xberapa nak menjadi tu adjust pada width gambar background mungkin besarkan atau kecil kn.Semoga berjaya.

1 comment

8 Mei 2012 6:23:00 PTG

trime kasihh yea atas perkongsian ini.. hehehee. :)