ANHVAEM

WOULD YOU WAIT FOR ME FOREVER?
 
Trang ChínhCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Share | 
 

 Tiện ích recent post với 2 cột hiển thị

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
tuongthomhnhp
ADMIN
ADMIN
avatar

POSTS : 2296
Points : 2147483647
Reputation : 0
Join date : 03/10/2011
Age : 24
Đến từ : tiến thắng mê linh hà nội

TÌNH YÊU CHO MỌI NGƯỜI
GAME:
CC:

Bài gửiTiêu đề: Tiện ích recent post với 2 cột hiển thị    Wed Oct 26, 2011 1:06 am

* Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào phần tử trang
3. Tạo 1 widget HTML/Javascript ở nơi mà bạn muốn hiển thị tiện ích, rồi dán code bên dưới vào :

<style type="text/css">
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://data.fandung.com/blog/demo/rc-post-2col/img-bg-rd.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#CC0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>

<script type="text/javascript">
home_page = "http://www.fandung.com/";
label = "Film";
numposts = 12;
sumTitle = 40;
colortitle = "#555";
</script>

<div id="rc-posts-2-col"><h3>Recent Posts 2 column</h3>
<div id="rc-posts-loading">
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>
<script src="http://data.fandung.com/blog/demo/rc-post-2col/rc-post-2cot.js" type="text/javascript"></
script>
</div>
4. Save widget.

- Code trên là dùng cho 1 nhãn nào đó. nếu muốn dùng cho cả blog, các bạn sử dụng file js này :


[You must be registered and logged in to see this link.]
- Tùy chỉnh code CSS, các bạn có thể tham khảo ảnh bên dưới để dễ dành tùy chỉnh code CSS theo ý mình.



- 1 vài chú thích cho các biến trong đọan code javascript ở trên:

home_page = “http://www.fandung.com/”; // domain của blog
label = “Film”; // nhãn muốn hiển thị bài viết
numposts = 12; // số bài viết sẽ hiển thị, lưu ý, vì là 2 cột, nên số bài viết phải là số chẵn
sumTitle = 40; // đây là số kí tự cho phép hiển thị nếu tiêu đề dài hơn 40 kí tự, còn đối với các tiêu đề có số kí tự ngắn hơn thì sẽ hiển thị đầy đủ
colortitle = “#555″; // màu của tiêu đề bài viết
- Nếu tiêu đề không được rút ngắn, tiện ích sẽ trông như thế này



- và đây là ảnh minh họa cho tiêu đề đã được rút ngắn



- Về việc điều chỉnh biến sumTitle = 40; giá trị 40 này sẽ được tùy chỉnh sao cho hợp lý với chiều cao và độ rộng của hàng, nếu các giá trị này của hàng được tăng lên, các bạn có thể tùy chỉnh lại giá trị 40 thành giá trị khác cho hợp lý.

[b]nguồn internet[/b]

____________tonytuonghnhp___________
TONYTUONG&PHANTHOM
Về Đầu Trang Go down
Xem lý lịch thành viên http://tonytuong.up-with.com
 
Tiện ích recent post với 2 cột hiển thị
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
ANHVAEM :: DANH MỤC CHÍNH :: GÓC IT FRVI-
Chuyển đến