Label Cloud

Search This Blog

24 February 2010

online counter Adjust Margin Navigation

Assalamualaikum , Msue nak sambung tutorial yang Msue postkan sebelum nie iaitu Tukar Navigation Bar Dari Text Ke Gambar / Icon . Kalau korang lom buat lagi korang boleh cuba . Kali ni Msue nak kongsi bagaimana nak adjust margin navigation . Selepas korang tukarkan navigation bar dari text ke gambar mesti akan jadi seperti di bawah ini .







1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod seumpama kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .


#navigation li a{
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;
margin-top: 5px;
display:block;
padding:0 10px;
font-weight:bold;
text-transform: uppercase;
text-decoration: bold;
background-color:inherit;
color: #666666;
font-size: 12px;
font-family: Franklin Gothic Italic;
}



4. Tambahkan kod di bawah


margin-left:38px;


Note: saiz margin pada yang di highlight korang leh tentukan sendiri .



5. Contoh penuh dan hasilnya






#navigation li a{
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;
margin-top: 5px;
margin-left:38px;
display:block;
padding:0 10px;
font-weight:bold;
text-transform: uppercase;
text-decoration: bold;
background-color:inherit;
color: #666666;
font-size: 12px;
font-family: Franklin Gothic Italic;
}


6. Preview dan Save Template jika tiada error .






Tinggalkan Komen Anda Disini