Footer của blog
Cách tạo footer cho blog:
- Nếu chưa quen với việc chỉnh sửa blog, để đề phòng sự cố, nên sao lưu template (mẫu) của bạn lại trước khi tiến hành công việc! Nếu chưa hiểu cách sao lưu, bạn có thể tham khảo TẠI ĐÂY!
- Sau khi copy mã, nên dán thẳng vào template để hạn chế mã bị lỗi khi copy!
- Sau khi copy mã, nên dán thẳng vào template để hạn chế mã bị lỗi khi copy!
1. Bấm vào hình tam giác nhỏ [1], một trình đơn thả xuống. Bấm tiếp vào "Mẫu" [2] (xem ảnh 1).
Ảnh: 1 Ảnh: 2
2. Bấm vào "Chỉnh sửa HTML" [3] (ảnh 2) sẽ hiện ra bảng HTML trong template của Blog. (Nếu đợi 30 giây vẫn không hiện ra bảng HTML - bấm vào nút "Trở lại" [5], rồi bấm "Chỉnh sửa HTML" [3] một lần nữa sẽ hiện ra).
3. Nhấp chuột trái vào một vị trí bất kỳ trong bảng HTML vừa hiện ra rồi bấm tổ hợp phím CTRL + F trên bàn phím (bấm và giữ Ctrl rồi bấm F) sẽ hiện ra bên góc phải ô "Search" [4]. Gõ hoặc dán đoạn mã: ]]></b:skin> vào ô đó và nhấn "ENTER" trên bàn phím. Đoạn mã ]]></b:skin> [6] sẽ tìm thấy (nằm trong nền màu vàng nhạt - ảnh 3).
Ảnh: 3
4. Chèn đoạn mã trong khung dưới đây lên phía trên dòng: ]]></b:skin>.
(Nhớ kéo thanh trượt để bôi đen và copy được đầy đủ!).
#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
Lưu ý: Trong đoạn mã trên, bạn có thể chỉnh sửa các thông số tô màu đỏ cho phù hợp với blog!
960px - chiều rộng của toàn bộ footer.
960px - chiều rộng của toàn bộ footer.
32% - chiều rộng của ba cột riêng biệt.
5. Tiếp tục gõ hoặc dán vào ô "Search" [4] đoạn mã: </body> rồi nhấn "ENTER" trên bàn phím để tìm kiếm. Sau đó chèn đoạn mã dưới đây lên phía trên </body>(chú ý: đừng nhầm với <body>).
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML12' locked='false' title='TÊN TIỆN ÍCH 1' type='HTML'/>
<b:widget id='HTML8' locked='false' title='TÊN TIỆN ÍCH 2' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='TÊN TIỆN ÍCH 3' type='Profile'/>
<b:widget id='HTML5' locked='false' title='TÊN TIỆN ÍCH 4' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='HTML3' locked='false' title='TÊN TIỆN ÍCH 5' type='HTML'/>
<b:widget id='HTML9' locked='false' title='TÊN TIỆN ÍCH 6' type='HTML'/>
</b:section>
</div>
<div style='clear: both;'/></div></div>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML12' locked='false' title='TÊN TIỆN ÍCH 1' type='HTML'/>
<b:widget id='HTML8' locked='false' title='TÊN TIỆN ÍCH 2' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='TÊN TIỆN ÍCH 3' type='Profile'/>
<b:widget id='HTML5' locked='false' title='TÊN TIỆN ÍCH 4' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='HTML3' locked='false' title='TÊN TIỆN ÍCH 5' type='HTML'/>
<b:widget id='HTML9' locked='false' title='TÊN TIỆN ÍCH 6' type='HTML'/>
</b:section>
</div>
<div style='clear: both;'/></div></div>
6. Bấm "Lưu mẫu" [7] và trở về trang chủ xem kết quả. Ở dưới cùng của trang blog sẽ có foote màu đen hiện ra.
Hoàn tất:
Trở lại giao diện ở bước 1 (hình 1), bấm vào "Bố cục". Ở phía dưới cùng của giao diện sẽ hiện ra 6 thanh tiện ích của footer (hình dưới).
Bấm vào chữ "Chỉnh sửa" để sửa tên tiện ích và thêm vào ô "Nội dung" những tiện ích bạn cần. Bạn có thể lấy thêm một số tiện ích có sẵn của blogspot bằng cách bấm vào "Thêm tiện ích". Một cửa sổ các tiện ích hiện ra, bạn hãy làm theo chỉ dẫn của giao diện để tạo tiện ích.
Cuối cùng, dùng chuột kéo thả, sắp xếp những tiện ích vừa tạo theo ý bạn, rồi bấm "Lưu sắp xếp" là xong. Bây giờ, bạn có thể trở lại trang chủ và tận hưởng thành quả.
Chúc thành công!Còn tiếp.
Categories:
0 nhận xét:
Đăng nhận xét