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.. ;)