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 */
}
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/s: Harap 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:
yeahh :D thanks banyak-2 ye sayang :)
@Fatin NajihahWelcome..dear..^ ^.Ada pob,roger2 erk^ ^
sayang, tak jumpe kod tu. puas cari, pakai kanta pembesar pun dah >< sobsob :( anyway sory susahkan awak sweetie.
@Fatin NajihahMiss Aten guna templates ape erk?..Kalau tuto ini sesuai untuk Denim Templates
kak meera nape tak jumpa kod tue?
@Aniss
anis pakai template ape?klu yg ni ssuai utk denim template jer..^ ^
@Cikmeera ouh yeke . takpelah kalu camtu . Hehe
hye awk ... x jmpa pun kod tue ?
cmna erk ? ?
ada tak tutorial cam ne tok templat widget???cute lha
tak jadilah :/
@Sarah Hudsonsorry agak lame tggl dunia edit blog... yee? ape pob yee.. u guna template ape sis?
sorry kpd yg x mjd wat tuto.. mungkin template korg x ssuai utk tuto nih,,
saya pun tak jumpa..
saya pakai simple template..
Post a Comment