24 February 2010
Adjust Margin Navigation
hak milik
Sue
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 .
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 .
