 |
| Ảnh minh họa |
Với thủ
thuật này, các bài viết của toàn bộ trang Blog hoặc các bài viết trong cùng một
nhãn được hiển thị trong một tiện ích được chia thành 2 cột riêng biệt: cột bên
trái và cột bên phải.
Cột bên
trái bao gồm 2 phần: Phần trên cùng (còn gọi là top-news) bao gồm một hình ảnh
đại diện và tiêu đề kèm theo một số dòng mô tả của bài viết mới nhất mà bạn vừa
mới đăng. Phần dưới (còn gọi là bottom-news) bao gồm 4 ảnh nhỏ và tiêu đề bài
viết của 4 bài đăng kế tiếp (số lượng này bạn có thể tuỳ chọn).
Cột bên
phải bao gồm các tiêu đề bài viết tiếp theo của Blog hoặc của một nhãn được sắp
xếp từ trên xuống theo thứ tự thời gian (số lượng này bạn cũng có thể tuỳ chọn).
Mời bạn bấm
vào đây để trải nghiệm trước thủ thuật này.
Đầu tiên,
bạn đăng nhập vào blog > Chọn thiết kế > thêm tiện ích HTML/Javacript (nếu
sử dụng giao diện mới thì bạn chọn Mẫu > thêm tiện ích HTML/Javacript), các
bạn nào chưa biết cách thêm tiện ích HTML/Javacript thì xem tại đây, rồi dán
code phía dưới vào.
<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 660px;
}
#top-news {
width: 460px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#0000ff; / màu nền tiện ích/
font-size:12px;
}
#bottom-news {
width: 460px;
padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:9px;
float:left;
}
#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Ff63JvRA5kM2fisYP_5J7ybKCnGznf0C-jmq_2i-MVC3m45JAMkJ054kLPuYdiZJ1dSscBWuo9_i9Yv8lrs1Z5Fp7tg-ga3sqFGAYNImHLK0TyeDJ6Ifkp7y4ljSYm4586zUEUHDUODr/s1600/1399304s1osheptmw.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 105;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#ff0000"; /màu của text /
cmcolor = "#fff";
topcolor = "#fff";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 15;
label = "";
home_page = "http://www.cdqtkd5a.blogspot.com/";
</script>
<script src="https://sites.google.com/site/dungheineken/all.txt" type="text/javascript"></script>
Bây giờ bạn
chỉnh sửa các dòng lệnh màu đỏ theo ý thích của mình. Trong đó:
* Width
(đầu tiên): là chiều rộng của cả tiện ích
* Width
(thứ hai): là chiều rộng của top-news
* Width
(thứ ba): là chiều rộng của bottom-news
*
Background: màu nền của top-news
*
Imgicon: icon trước tiêu đề bài viết ở cột bên phải
*
Topwidth: chiều ngang của ảnh ở top-news
*
Topheight: Chiều cao của ảnh ở top-news
*
Botheight: Chiều cao của ảnh ở bottom-news
*
Botwidth: Chiều ngang của ảnh ở bottom-news
*
cmcolor: màu của chữ
* Summary
Post: số lượng từ của dòng mô tả bài viết mới nhất
* Summary
Fontsize: Kích thước chữ của dòng mô tả bài viết mới nhất.
* Botnum:
Số lượng ảnh và tiêu đề các bài viết ở bottom-news
*
Numpost: Số lượng các bài viết hiển thị ở tiện ích (bao gồm các bài viết ở
top-news, bottom-news và các bài viết ở cột bên phải)
* Label:
tên nhãn (nếu sử dụng cho cả blog thì ô này bỏ trống, còn nếu sử dụng cho một
nhãn thì bạn phải viết chính xác tên nhãn và tên nhãn này phải nằm trong dấu
ngoặc kép nếu không thì tiện ích này sẽ bị lỗi và không hiển thị...).
* Home
Page: Địa chỉ blog của bạn.
Cuối cùng
bấm Lưu và trở về blog xem kết quả nha.
Mở rộng
thêm:
Code trên
tôi đang áp dụng cho toàn blog, vì vậy nếu muốn hiển thị cho một nhãn nào đó
các bạn phải ghi chính xác tên nhãn ở dòng lệnh Label và thay thế dòng lệnh màu đỏ bằng dòng lệnh này:
https://dl.dropbox.com/u/66348944/only.txt
Chúc các
bạn thành công
26/11/2013 - 0 Nhận xét
08/12/2013 - 0 Nhận xét
Thống Kê :
Comments[ 0 ]
Đăng nhận xét