Tutorial cara hias tajuk widget sidebar

Tutorial ni atas request Inani a.k.a akuastronaut

Tutorial ni menggunakan simple css code.. kita akan hias tajuk widget menjadi rounded corner di atas dan straigh corner di bawah

Contoh seperti gambar di atas tu

Sebelum memulakan upacara mengedit template.. save template terlebih dahulu..

Mula2 pergi ke desbod---design---edit html... tidak perlu tick pada expand widget template..

cari code

]]</b:skin>

kemudian copy dan paste code di bawah,, sebelum code yang dicari tadi

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }


CONTOH

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }
]]</b:skin>

Penerangan dan cara edit

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }

background:#FFB3C6 ni code warna  background untuk tajuk widget sidebar tu.. anda boleh tukar code warna tu ikut suka2 hati anda,, lalalala

border-radius:10px 10px 0px 0px  .. inilah dia code yang buat dia rounded corner di atas dan straight corner di bawah .. angka 10 px tu anda ubah la mengikut kesesuaian makin besar angka tu makin melengkung.. ubah kedua2 angka 10px tu.. jangan ubah angka 0px tu..

text-align:center tu.. membuatkan tajuk sidebar berada di tengah.. jika anda mahutajuk sidebar di kiri tukar code tu dengan  text-align:left;   .. jika anda mahu tajuk tu lepak di kanan tukar code tu kepada text-align:right;

font-size:17px tu saiz tulisan.. anda ubah mengikut kesesuaian blog anda

padding:7px ni aku x tau macamana nak terangkan.. cuba anda ubah ikut kesesuaian.. cuma tukar angka 7 tu

senangkan..

Sekian