Pages

Monday, March 21, 2011

Cara untuk CENTERkan TEXT HEADER & TEXT DESCRIPTION..

Assalamualaikum...

Cara untuk CENTERkan TEXT HEADER & TEXT DESCRIPTION..

Hari ni aku ubah lagi template blog aku ni. Entah la, sedikit jemu dengan template yang lama tu sebab bahagian header dia besar sangat. Dah puas aku godek-godek HTML template tu, tapi tak menjadi kecik jugak.

Kali ni aku gunakan template blogger in draft sebab senang sikit aku nak mengubah-suai kelebaran ruang untuk post dan sidebar. Aku ni jenis yang suka ruang untuk post tu lebar sikit dari biasa. Sebab tu la aku selalu gunakan template jenis 2 column. Kalau gunakan jenis 3 column tu, nampak terhad sangat.

Sebenarnya kedudukan text header dan description blog aku ni tak balance. Sebelum diedit, kedudukan kedua-duanya adalah di sebelah tepi. Aku memang sedari dulu tercari-cari jugak tutorial macam mana nak bagi center header aku tu, tapi bila google dalam Bahasa Malaysia, lain pulak yang keluar. Sangat tidak memenuhi permintaan. Jadi, aku cuba la google in English. Wahhh, macam-macam ada, tinggal lagi faham dengan tak je tutorial tu... hahaha...

Aku kongsikan sedikit info yang aku dapat tu ehh. Bagi sesiapa yang sudah tersangat terror dalam hal sebegini, buat tak tau je la ya. Ini untuk orang-orang yang baru nak belajar menggodek HTML seperti aku.. =D

Kaedah untuk meng'center'kan text header dan text description lebih sesuai jika korang menggunakan Placement "Behind title and description" seperti contoh di bawah..



Image





Placement

Apa yang perlu korang buat adalah pergi ke:

Design -> Edit HTML -> Tick Expand Widget Template -> Tekan Ctrl + F

dan cari kod #header-inner seperti kat bawah ni:

.Header img, .Header #header-inner


Kemudian, korang cuma perlu tambahkan kod ini {text align: center ;} kat sebelah kod #header-inner tadi. Nanti dia akan jadi seperti ini:

.Header img, .Header #header-inner {text align: center ;}

Pastu, korang klik PREVIEW dulu dan tengok hasilnya. Kalau dah menjadi, barulah korang tekan SAVE TEMPLATE...

Okay, kalau korang tak faham cara aku ni, apa kata korang cuba tengok kat sini supaya korang lebih faham. Tengok kat tutorial yang nombor 3 tu. Maklum la, aku ni tak mahir sangat...

p/s: Tak faham, tapi nak bagi tutorial jugak... huhuhu...