Assalamualaikum...
Cara untuk CENTERkan SIDEBAR TITLE/FOOTER TITLE & Cara Buat BORDER.
Cara untuk CENTERkan SIDEBAR TITLE/FOOTER TITLE & Cara Buat BORDER.
Hari ni aku nak kongsikan cara untuk centerkan sidebar title ataupun tajuk untuk sidebar gadget/widget yang kita letak samada kat sebelah kanan atau kiri blog kita tu. Memandangkan date atau tarikh juga termasuk dalam kategori sidebar title, maka kedudukannya juga akan ikut berubah iaitu di bahagian center.. Sila lihat nombor yang tertera kat dalam gambar sebagai rujukan... =D
Seperti biasa, masuk kat:
Dashboard -> Design -> Edit HTML -> Tick Expand Widget Templates -> Ctrl + F
(1)
Untuk centerkan sidebar title tersebut, carilah code seperti kat bawah ni atau yang seumpama dengannya:
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
Dan tambahkan dengan code text-align:center; seperti kedudukan di bawah dan ia akan kelihatan seperti ini:
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
text-align:center;
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
(2)
Untuk membuat border pula, carilah code seperti di bawah ini atau yang seumpama dengannya:
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
text-align:center;
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
Dan tambahkan dengan code border:2px solid #00ff00; dan ia akan jadi seperti ini..
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
text-align:center;
border:2px solid #00ff00;
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
(3)
Manakala untuk centerkan text kat bahagian footer/attribution, carilah code ini:
/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: $(footer.background);
Dan tambahkan dengan code text-align:center; dan ia akan jadi seperti ini..
/* Footer
----------------------------------------------- */
.footer-outer {
text-align:center;
color:$(footer.text.color);
background: $(footer.background);
Rasanya cukup setakat ini dulu. Aku sekadar berkongsi apa yang telah berjaya aku buat. Pening jugak main coding ni. Namun, bila ianya berhasil, seronok la pulak... hahaha.. Tapi aku suka yang simple je.. Tak suka yang serabut sangat.. =)
p/s: Oh ya... Sila salin balik coding tu sebab blog ni takde pakej copy and paste... Harap maklum.. ;)
14 Tukang Tembak:
azz..nak baco boto2 ni..lopeh ni nak cubo sendiri..tak yah dah nak panggil2 aimi.timo kasih azz
Kak Erna>
Cubo la kak... Janji akak kono tokan preview dulu.. Tengok jadi ke tak... Kalau tak jadi nnt dio kuar Error.. Jangan terus tokan Save... kang takut hancur lak template akak tu... abeh lak hilang semuo ehh... haru je nanti..
wah kak azz..dua entri derek pasal tutorial jek ni.. ;)
psstt : Tips SS : Rajinlah Komen
tuto yang best :)
thanks for sharing ^^,
Siti Safiyyah>
Haha... Buat untuk diri sendiri sebenarnya.. Senang nak buat rujukan. Takde la terkial2 nak gugel lagi.. hehe....
marshmallows>
Thanx... Sudi2 la mencubanya nanti ya... =)
Cik azz terima kasih sebab sudi tunjuk ajar. makcik pun tak tahu bab tukar menukar ni.nanti bolehlah rujuk kat sini.
Cik Ina>
Sayapun tak tahu jugak ni.. Baru nak belajar dan mencuba je...
Boleh je kalau nak rujuk kat sini.. Nnt tgk kat bahagian Tutorial kat tab atas tu ehh...
owh..header saye sudah berada ditengah-tengah...
hoyeah...
tengkiu cik azz..ekekekeke
Cik aletheea>
Hoyeaaaa... Tahniah3.. haha..
Akak dah tengok dah tadi blog kamu...
Welkam dik.. =)
camne nak highlight code..disable .. tak dpt amik kod tu
Cik Aish>
Taip aje code yg memula utk setiap proses.. nanti keluar la anak2 dia sekali ikut kat bawah tu..
Nak mencuba ni tak boleh main copy je.. kena la rajin sikit... :-)
thanks..
info yang menarik ^^
ayda aya>
Thanx..
sebab kata ianya menarik..
:-)
Thanx..
sebab sudi singgah, komen dan follow blog ni..
;)
Post a Comment