9/02/12

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

7 ulasan:

Cik Kay Jue berkata...

xde pun kod tu.. huhu

Polskahackrew berkata...

@Cik Kay Jueterima kasih sebab tegur.. huhu.. mmg code tu x ada sebab saya silap type.. nasib baik awak awak habaq.. thanks ekk.... saya da edit code tu,,,

Inani berkata...

thanks sangat..^^..
da tersenyum lebar da ni baca post ni..
huhuhu..amat2 la berterima kasih..

teruskan usaha untuk share ilmu mengenai blogging2 ni..^^..

Polskahackrew berkata...

@Inanisama2.. trima kasih atas sokongan anda

Rieyn Anna berkata...

da wat..dan da jadi..thanks ye..hihii~

Polskahackrew berkata...

@Rieyn Anna

Your welcome.. ('',)

vina devina berkata...

wah keren juga ya mas

entri ja

Related Posts Plugin for WordPress, Blogger...