Bước 1 : Tạo thêm 2 cột cho post footer như sau :
Bắt đầu:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code màu đỏ vào như bên dưới:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
...
...
...
</b:section>
<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
</div>
- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng <div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.
<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>
- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.
6. Save template.
Bước 2 : Khi đã tạo thành công post footer bạn tiến hành thêm code vào HTML con
+ Tạo thêm HTML con cho 2 cột post footer vừa tạo và chèn code sau vào :
-------------------------------------
rc_feedLink = "http://www.blogger.com/feeds/905770786296098901/posts/default/-/Các sản phẩm chính";
- 905770786296098901 : Blog ID của bạn ( bạn sẽ thấy nó trên thanh tatus trên cùng )
Bắt đầu:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code màu đỏ vào như bên dưới:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
...
...
...
</b:section>
<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
...
...
...
...
...
</b:section>
</div>
- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng <div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.
<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>
- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.
6. Save template.
Bước 2 : Khi đã tạo thành công post footer bạn tiến hành thêm code vào HTML con
+ Tạo thêm HTML con cho 2 cột post footer vừa tạo và chèn code sau vào :
-------------------------------------
<div class='widget-content'>
<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://blogthugian.files.wordpress.com/2010/04/1.jpg";
imgr[1] = "http://blogthugian.files.wordpress.com/2010/04/2.jpg";
imgr[2] = "http://blogthugian.files.wordpress.com/2010/04/3.jpg";
imgr[3] = "http://blogthugian.files.wordpress.com/2010/04/4.jpg";
imgr[4] = "http://blogthugian.files.wordpress.com/2010/04/5.jpg";
showRandomImg = true;
tablewidth = 295;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#000";
aBold = true;
icon = " • ";
text = "cm";
showPostDate = true;
summaryPost = false;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " → ";
numposts = 6;
</script>
<script src="http://mon.vn/script/recentposts_thumb_final2.js" type="text/javascript"></script>
</div>
<div class='clear'></div>
-------------------------------------------------
Lưu ý : Thay code màu đỏ cho phù hợp với blog của bạn!
-
Các sản phẩm chính : đây là label bạn muốn cho hiển thị trong thủ thuật này
Xong! chúc các bạn thành công!