(Pembetulan Kembali)Cara buat Border Pada Sidebar Widget.

Posted by Mira Rasidi | 18 March 2012 | 13 Comment
Tutorial ini permintaan dari sayang cik meera iaitu Miss Aten.Semalam dia ada tanya macam mana nak buat border dekat sidebar.Actually,blogger boleh letak border dekat sidebar dengan beberapa teknik & jugak boleh mengikut kreativiti masing-masing.Tapi untuk kali ini cik meera akan kongsikan cara nak buat border pada setiap sidebar widget dulu yerk.
Sebelom tu,Jom kita tengok contoh border yang dimaksudkan dulu:-
 #Yang berada dikeliling sidebar widget itulah border .OK.Nak buat jugak?:)
Aha sebelom tu,Bertenang.Tarikh nafas panjang-panjang.Kemudian dimulakan dengan Bismillah.^ ^

Ok.Jom Folow STEP Bawah....>>>

1.  Dashboard>Design>Edit HTML>tick Expand Widget Templates
(Untuk langkah berjaga-jaga,Backup blog korang dulu OK.)

2.  Cari kod ini
#sidebar-wrapper {

3.  Kemudian,Cuba lihat kod di bawah #sidebar-wrapper {, terdapat kod lebih kurang seperti ini:
margin-$endSide: 14px;
  width: 270px;
  float: $endSid  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

contoh>>>

KLIK untuk tengok image lebih jelas erk...


3. Copy kod di bawah & Paste SELEPAS kod di STEP 3. Seperti contoh di atas.
#Profile1 {
padding: 0 5px 0 5px;
background: #ffffff;
border: solid #000000 1px;
}
#Widget ID1, #Widget ID2, #Widget ID3, #Widget ID4, #Widget ID5, #Widget ID6, #Widget ID7,#Widget ID8,#Widget ID9,#Widget ID10 {
padding: 0 6px 0 6px;
border: dashed #808080 2px;
        -moz-border-radius: 15px;   
border-radius: 15px;
 background: #ffffff;
}


*AAA: Warna Background
*AAA: Gantikan yang dibirukan dengan nombor-nombor widget ID korang.

Contoh:Sekiranya Widget ID korang adalah HTML20.So just Copy & Paste Widget ID korang di bahagian yang dibirukan.
Tak tahu macam mana nak dapatkan Widget ID?.Klik SINI
Sekiranya korang nak tambah disebabkan widget korang banyak,hanya Copy kod   ,#Widget IDBaru  & Paste disebelah kod #Widget ID10. Lakukan berulang-ulang sehingga mencukupi bilangan sidebar widget korang.
Maka,Widget IDBaru juga perlu digantikan dengan widget ID korang.

*AAA: Pattern Border korang.Boleh tukar kepada dashed/dotted/solid
*AAA: Warna Border.Klik SINI untuk dapatkan kod warna
*AAA: Ketebalan Border
*AAA: Bentuk Border.Nak bentuk border yang lain?Klik SINI



4. Preview.Kalau jadi Save.


 P/sHarap Maaf!Step  agak kacau bilau .Cik Meera harap korang boleh faham dengan STEP ini erk.Cik Meera  buat jugak Step yang kacau bilau ni sebab nak  elakkan border-border yang kosong kat sidebar korang bila korang letak border.So.Memang agak susah sikit Stepnya.Hehehe
Ada masalah.Jangan lupa bertanya OK^ ^




Credits untuk Ceeramoon

13 comments:

Fatin Najihah said...

yeahh :D thanks banyak-2 ye sayang :)

Mira Rasidi said...

@Fatin NajihahWelcome..dear..^ ^.Ada pob,roger2 erk^ ^

Fatin Najihah said...

sayang, tak jumpe kod tu. puas cari, pakai kanta pembesar pun dah >< sobsob :( anyway sory susahkan awak sweetie.

Mira Rasidi said...

@Fatin NajihahMiss Aten guna templates ape erk?..Kalau tuto ini sesuai untuk Denim Templates

AnissNaza said...

kak meera nape tak jumpa kod tue?

Mira Rasidi said...

@Aniss
anis pakai template ape?klu yg ni ssuai utk denim template jer..^ ^

AnissNaza said...

@Cikmeera ouh yeke . takpelah kalu camtu . Hehe

Afiq Bojon said...

hye awk ... x jmpa pun kod tue ?
cmna erk ? ?

Unknown said...

ada tak tutorial cam ne tok templat widget???cute lha

Unknown said...

tak jadilah :/

Mira Rasidi said...

@Sarah Hudsonsorry agak lame tggl dunia edit blog... yee? ape pob yee.. u guna template ape sis?

Mira Rasidi said...

sorry kpd yg x mjd wat tuto.. mungkin template korg x ssuai utk tuto nih,,

gomo merah said...

saya pun tak jumpa..
saya pakai simple template..