surfingfeed widget

Menukar Background Blog

November 1, 2012

Assalamualaikum dan Salam Sejahtera. Hari ni aku nak tunjukkan bagaimana nak menukar background blog.

Sebenarnya tutor kali ini adalah diatas permintaan rakan blogger Sembang Cyber iaitu Mohd Syamil Ramli. Beliau ada meminta aku untuk mengajar beliau cara mengedit template dengan cara menunjukkan code mana yang perlu dia target untuk mengubah sesuatu struktur blog.

Kalau diikutkan dah ada beberapa tutor untuk mengedit template dalam blog aku ni. Cuma tak banyaklah. Sebabnya bukan senang nak buat tutor bagi orang faham. Salah bagi step mahu hancur lebur blog orang nanti. Apa-apa pun aku akan cuba buat u all faham dengan tutor aku.

Okaylah meh kita teruskan dengan tutor.

Apa yang perlu dilakukan ?

  1. Basic/Asas dalam kerja pengeditan/pengubahsuaian template adalah "Back Up Template". Ini bertujuan untuk kita re-upload back template, andai pengubahsuaian yang dilakukan tidak menjadi ataupun blog anda rosak akibat dari pengubahsuaian yang dilakukan.
  2. Barulah pi pada ruangan "Edit HTML" dan tandakan pada "Expand Template Widget".
  3. Cari CSS Code body {.

Background Blog Menggunakan Elemen Warna:

Tak banyak yang perlu u all ubah. Apa yang u all perlu buat hanyalah mengubah code css background pada code body { sahaja. Seperti dibawah ini:

body {
     background:#ffffff;
     }
  • Jika u all ingin mengubah warna background blog. U all just perlu tukar kod warna yang ditandakan dengan warna merah itu sahaja.

Background Blog Menggunakan Elemen Imej:

body {
     background:#ffffff url(http://url-image-yang-anda-mahukan) fixed;
     }
  • U all perlu menukar url yang ditandakan dengan warna merah tu dengan url image yang u all mahu gunakan bagi background blog.
  • Saiz image yang digunakan seelok-eloknya tidak terlalu besar. Kerana ianya akan mempengaruhi loading blog.

Background Outer Wrapper:

Langkah yang ini penting untuk membuatkan artikel blog boleh dibaca oleh visitor blog u all. Langkah ini perlu dilaksanakan bergantung kepada jenis image dan warna yang digunakan bagi background blog. Apa yang perlu u all cari adalah....sila cari CSS Code #outer-wrapper {.

Kalau tak jumpa tu. u all carilah menggunakan keyword "wrapper". Sebab ianya bergantung kepada template yang digunakan. Ada sesetengah template menggunakan #main-wrapper {. Jadi pandai-pandailah u all nak menjejaki code tu ya.
Menggunakan Background Warna
#outer-wrapper {
     background:#ffffff:
     margin:10px 0px 10px 0px;
     border: 2px solid #222;
     }
  • Sila ubah yang berwarna merah itu mengikut keperluan dan kemahuan u all.
Menggunakan Background Image
#outer-wrapper {
     background:#ffffff url(http://url-image-yang-mahu-digunakan) fixed;
     margin:10px 0px 10px 0px;
     border:2px solid #222;
     }
  • Sila ubah yang berwarna merah itu mengikut keperluan dan kemahuan u all.
Pssst: Sila klik "Preview" terlebih dahulu dan lihat sama ada ianya menepati citarasa u all ataupun tidak. Jika apa yang di PREVIEW tidak seperti apa yang u all impikan. Sila klik "Clear Edit" dan lakukan sekali lagi tutor diatas dengan idea u all sendiri.

Jika u all nak menambahkan lagi kecantikan blog u all tu. Pada code CSS #outer-wrapper {, u all boleh menambah code CSS shadow seperti dibawah:

Box Shadow ver.1:
box-shadow:0px 0px 15px #000000;-moz-box-shadow:0px 0px 15px #000000;-webkit-box-shadow:0px 0px 15px #000000;
Box Shadow ver.2:
box-shadow:3px 3px 3px #000000;-moz-box-shadow:3px 3px 3px #000000;-webkit-box-shadow:3px 3px 3px #000000; 
  • Kalau u all nak warna shadow yang lain. Just tukar #000000 kepada kod warna yang lain. 

Post a Comment

 

Google+ Badge

Sila LIKE Halaman Facebook jika ingin mendapatkan respond dengan pantas jika komen anda tidak berjawab di blog. Ataupun anda boleh kemukakan soalan melalui menu 'Email Us'. Harap Maklum

Artikel Terkini