Tutorial : Border Image (Simple Template)

Dah lama sangat-sangat sy nak share tutorial ini... rasanya ada jejak dalam 2 tahun ianya hanya terdraft di folder draft.. HAHA.. Teruknya... -_- So, setelah berhempas pulas mencari penyelesaian untuk coding border image for simple template... Serious memang coding nya tak banyak yang sama dengan template denim yang macam saya pakai sekarang ini... ^^ 
 Yeah ! Border Images seperti border kayu yang anda lihat dalam gambar nie.. k.. Nampak sweet sgt tak ? Selalu just guna color border dan jenis-jenis border aja, tapi yang ini , korunk boleh customes corak border mengikut suka hai korunk lah.. nak berbunga-bunga ke., beralun ke, tajam pun boleh kalau nak.. >_< Sudah-sudah!!! Tak nak mngarut panjang-panjang, meyh kita focus membuatnya.. ^^ Let's Start !
Before that, ini yang saya boleh share as freebies border image.. amiklah... ^^ 
http://i.imgur.com/Ztvm214.png?1
http://i.imgur.com/hor8ygA.png?1

1. Template --> Edit HTML --> Search for words (CRTL+F):
/* Mobile
2. Dah jumpa code di atas ??? Ok, Good. Sila copy code di bawah di atas code /* Mobile
.main-outer, .tabs-outer {
background: url(Url image border) repeat-y;
}
Oh ya, sebelum saya terlupa dan melangkah ke step seterusnya, tolong cari words (CRTL+F):
.date-header span { 
Tambahkan code di bawah :
padding: 0px 9px;
.main-inner {
Tambahkan code di bawah :
padding: 8px 9px;

3. Save dan Preview...

Korunk ada nampak benda yang tak kena kan??!
Problem nya bila hanya ada sebelah side yang tak nampak border macam gambar yang korunk dah designkan...

So, ikut step seterusnya :
4. Template --> Customize -->  Choose Adjust Widhts
Sila tukar dan laraskan lebar content blog krunk...
Biasa Nurrul akan guna size seperti ini :
  • Entire Blog : 1000px
  • Right Side bar : 310 px 
*yang ini ikut suka anda nak berapa lebar, yang pasti adjust sampai nampak border lagi sebelah.. Ok ? ^^
5. Dah puas hati dengan lebar yang korunk nak, sila click Apply to blog..

Al right, then Preview Blog sekali lagi... Boleh tersenyum dengan lebar kerana akhirnya hasrat untuk memiliki image border design sendiri berjaya !! #Boleh buat air MILO untuk penghargaan pada diri sendiri... hehehee
Inform Nurrul , jika berjaya dan notify Nurrul jika tidak berjaya, At least Nurrul akan buat sesuatu untuk pastikan tutorial yang Nurrul share boleh diguna pakai ... Thanks !! ^^


No comments

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan