POWER OIL AND GAS

Cara Letak dan Tukar Sidebar Border

Assalamualaikum dan Salam Sejahtera semua.

Mungkin dalam 2@3 hari nie Jamal tak dapat nak update dengan new entry sebab Jamal tengah sibuk mengedit balik post-post lama blog nie dengan memasang tag dan mengaplikasikan teknik mesra SEO. Korang bayangkan lah Jamal ade 154 post nak kena edit semua post tue. Memang kena saba la, nie pun masih ade lagi 50 entry belum siap edit lagi.

Jika sebelum nie Jamal ade share dengan korang semua tutorial macam mana nak tukar sidebar background colour. So malam nie Jamal nak share dengan korang berkenaan dengan cara-cara untuk mengubah dan meletakkan border untuk sidebar. Nanti jadi macam gambar kat bawah nie.


Steps :
  • Pergi ke DASHBOARD > DESIGN > EDIT HTML
  • Cari code dibawah nie dan untuk memudahkan pencarian, korang boleh tekan Ctrl + F dan paste coding ini untuk search ye.
]]></b:skin>
  •  Bila dah jumpe code diatas nie, korang copy pulak code dibawah nie dan pastekan betul-betul diatas atau sebelum code step no 2 tadi.
.sidebar .widget {
background : transparent ;
border: 5px solid #000000;
margin:0 0 2em;
padding:10px 10px 10px 10px ;
}
  • Explanation
    1. background : transparent ; = kalau nak letak warna selain transparent pun boleh. Gantikan ayat transparent tue dengan kod warna mcm nie.. #000000 (pilih kod warna yang korang suka)
    1. border: 5px solid #000000; = nilai 5px ialah ketebalan border. Korang boleh jugak tukar..solid = boleh tukar ke dashed @ dotted. Kod warnapun boleh tukar jugak ye.
    2. margin:0 0 2em; = Yang nie jarak antara setiap gadget di sidebar. Kalau nak rapatkan tukar la kepada 1@0.
    3. padding:10px 10px 10px 10px ;
      = yang nie ialah jarak dalam kotak gadget tu pulak. Korang try la ubah tengok ape akan jadi. hehe.
  • Step seterusnya korang kena buang border yang korang pakai sekarang nie. Cari coding kat bawah nie. Dan korang delete code yang warna merah tue ye.
.fauxcolumn-left-outer .fauxcolumn-inner {
 border-left: 1px solid $(body.rule.color);
}
  • Bila dah siap, korang tekan button preview dulu tengok ada error ke tak ye. Kalau nampak semua ok, baru save. Dan dah siap.

Selamat mencuba, Gud Luck kawan-kawan
"Sharing Is Caring"

10 comments:

ArulchelseA said...

Tq en.jmal.. info yg berguna..

JAMALUDDIN ABU BAKAR said...

Your Welcome Arul.

InsyaAllah lepas nie Jamal ajar cmne nak buat border untuk post pulak ye..:-)

abdullah gazali said...

terima kasih share ilmu nie .
berguna sngat walaupun saya tak guna border.

JAMALUDDIN ABU BAKAR said...

Sama-sama..

Takpe,boleh simpan tutorial nie. Mana tahu satu hari nanti nak pakai ke kan, boleh praktikkan..

★♫ Ct Hajar ★♫ said...

nak tnye


camna kalau kite nak fill colour dalam border tu


ade tuto x?

JAMALUDDIN ABU BAKAR said...

Boleh je rasenye..tapi kena pandai ubah-ubah coding tersebut la.

Jamal takde masa nak explore la, busy kerja sikit nie, maklumlah dah nak raya. Kena siapkan semua kerja sebelum cuti raya..

Terbelog said...

salam jamal
nak tya
mcm mana buat menu mcm kamu
lagi satu
cth mcm menu tutorial..
kamu list kan satu2 ke tajuk2 entri tu
atau boleh set kan mcm site map
(*phm ke soalan sy :)

JAMALUDDIN ABU BAKAR said...

Menu tue adalah pages..

Memang kena listkan satu2 la entry yg berkaitan dengan tutorial. Itu bukan sitemap.

✿SeManiS KuRmA✿ said...

tq en jamal..jd kt bt..=)

Azira Ldu said...

terima kasih banyak2 sebab buat tuto ni.. lama betol cari baru dapat...

Related Posts Plugin for WordPress, Blogger...