Customize Header

Tutorial kali ini M'Rie akan berkongsikan dengan para rakan dan pengguna template Thesis For Blogspot by Forblogger[.]Net yang dipinta oleh saudari +Nur Imans . Maka dengan itu M'Rie berbesar hati untuk menghasilkan tutorial mudah buat beliau.

Mengubahsuai Kelebaran dan Ketinggian Header.

Okay apa yang perlu anda semua lakukan adalah, anda perlu pergi ke ruangan "Edit HTML". Kemudian gunakan "Ctrl + F" dan carilah CSS Code seperti dibawah ini:

#header-wrapper{
   width: 960px;
   height:63px;
   color: #111111;
   margin: 0 auto 0;
   padding-top: 1px;
   padding-left: 0px;
   padding-right:1px;
   padding-bottom:0px;
   overflow: hidden;      
   }

Width:960px; Jika anda ingin mengubah kelebaran header. Anda perlu mengubah size pada CSS Code tersebut. Anda boleh laraskan size disitu supaya header anda menepati size yang dikehendaki.
Height:63px;, Jika anda ingin mengubah size ketinggian header anda. Anda haruslah melaraskan size pada CSS Code berkenaan.

Tips Sembang Cyber.

Jika anda ingin membuat header yang serasi dengan blog. Sila pastikan size header yang hendak dihasilkan sama dengan size CSS Code bagi header yang berada didalam coding template yang digunapakai. Ambil contoh. Jika saiz header adalah 960px X 100px. Maka anda perlulah menghasilkan header yang sama saiz. Terutamanya lebar (width) header, biasanya ketinggian (height) tidak menjadi masalah kerana kita boleh laraskan pada CSS Code.

Seperti masalah yang dihadapi oleh saudari +Nur Imans . Header yang dihasilkan adalah bersaiz 990 x 241, sedangkan header yang sepatutnya dihasilkan adalah bersaiz 960 x 240/241. Kesilapan yang dilakukan adalah saiz lebar (width), dimana beliau terlebih saiz yang sepatutnya. Jadi disini M'Rie sarankan beliau mengubah semula saiz image header tersebut menggunakan photoshop ataupun hasilkan header yang baru dengan menggunakan saiz 960 x 240/241.

Mengubahsuai HeaderLeft dan HeaderRight.

Buat makluman semua pengguna TFBv2. Template ini mempunyai 2 section dibahagian header iaitu Header Left dan Header Right.

HeaderLeft, adalah ruangan untuk kita meletakkan header yang kita mahu.
Header Right, pula adalah ruangan untuk kita meletakkan widget yang kita mahukan ataupun kita boleh meletakkan banner iklan disini.

CSS Code Header Left:

.headerleft {
   width: 480px;
   float: left;
   margin: 0;
   padding: 0;       
   }

Jika anda ingin menggunakan header yang mengikut saiz seperti diatas. Maka anda perlu menghasilkan header yang bersaiz 480x200 (contoh). Width header anda tidak perlu usik, anda cuma perlu mengubah height header pada CSS Code #header-wrapper{ sahaja.
Jika anda ingin menambah background pada header right. Anda cuma perlu menambah CSS Code background:#000000; pada css code diatas.<-- ubah dengan kod warna yang anda suka.

CSS Code Header Right:

.headerright {
   width: 470px; 
   float: right;
   margin-right: 4px;
   padding-top: 0px;
   padding-bottom:15px;
   font-weight: bold;
   }

Berkaitan header right pula. Jika anda ingin meletakkan banner iklan di ruangan header right. Rasanya anda tak perlu nak ubah apa-apa. Melainkan anda ingin meletakkan banner yang saiznya melebihi 470px. Jika begitu anda perlu mengimbangkan saiz antara width header left dan header right.

Pages