Cập nhật yêu cầu của bạn Tài (roboonline.tk)- (1/7/2009)

[FD's BlOg] - Bài viết này mình sẽ giới thiệu cho các bạn 1 style khác của tiện ích Recent posts. Bài viết này cũng tương tự dạng hiển thị theo gallery, nhưng ở bài này mình chỉ cho nó hiển thị trên cùng 1 hàng, mang phong cách tương tự như trang mp3.zing.vn.

Xem demo ở đây : http://data.fandung.com/blog/demo/news-recent/zingnews.html

Ở bài viết này mình chỉ hiển thị ảnh thumnail và tiêu đề bài viết, như thế sẽ hợp lý hơn cho tab.

Hình ảnh minh họa:

Hình ảnh từ trang mp3.zing.vn

Hình ảnh từ thủ thuật này

Rút kinh nghiệm từ các thủ thuật trước, ở thủ thuật này mình đã đổi lại tất cả các biến thay thế trong code JS, để tránh gây ra xung đột.

☼ Và đây là code của thủ thuật:

<style type="text/css">

#zart {
height:108px;
margin-right: 3px;
float:left;
width:100px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#z-title {
height:40px;
}

#z-content {
height:50px;
padding-top:5px;
}

#z-news {
height:120px;
background:#ccc url(http://farm4.static.flickr.com/3656/3677502552_3f0c38be7d_o.gif) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left: 30px;
}
</style>

<div id="z-news">
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;

zimgwidth =100;
zimgheight =70;
zfntsize = 12;
zacolor = "#555";
zaBold = true;

text = "no";
showPostDate = false;

numposts = 6;
label = "Love";
home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/news-recent/zart-label.js" type="text/javascript"></script>

</div>

- Các bạn hãy tùy chỉnh lại kích thước và màu sắc của các khung (tùy chỉnh code CSS) cho phù hợp với blog của bạn. (xem hình minh họa bên dưới để hiểu rõ hơn)

- Nếu muốn hiển thị bài viết mới của cả blog thì các bạn đổi link JavaScript thành link bên dưới:

http://data.fandung.com/blog/demo/news-recent/zart-post.js

☼ Style 2 : Hiện thị tiêu đề khi rê chuột vào ảnh (Yêu cầu của bạn Tài - Roboonline.tk)
- Theo như yêu cầu, style thứ 2 này sẽ có chỉnh sửa đôi chút. Thay vì tiêu đề luôn hiển thị thì giờ nó chỉ hiển thị khi rê chuột vào ảnh. Thủ thuật này mình từng gặp ở hiệu ứng jQuery, nhưng ở bài viết này mình sẽ không sử dụng nó, thay vào đó mình sẽ chỉ sử dụng CSS, như thế nó sẽ nhẹ hơn.

- Xem demo ở đây : http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zingnews.html

Hình ảnh minh họa:

- Các tùy chỉnh tương tự style ban đầu. Chỉ có thêm phần hiển thị tiêu đề bài viết, chiều cao của vùng hiển thị này sẽ phụ thuộc và độ dài của tiêu đề bài viết, do đó bạn hãy tùy chỉnh các kích thước sao cho hợp lý nhất. Để tùy chỉnh vùng hiện thị tiêu đề, các bạn có thể điều chỉnh trong phần code CSS của class zmota:hover span trong code bên dưới :

và đây là code của style này :

<style type="text/css">
#zart {
height:108px;
margin-right: 3px;
float:left;
width:100px;
padding: 5px;
border:1px solid #bbb;
background:#eee;
}

#z-title {
height:40px;
}

#z-content {
height:50px;
padding-top:5px;
}

#z-news {
height:120px;
background:#ccc url(http://farm4.static.flickr.com/3656/3677502552_3f0c38be7d_o.gif) no-repeat left;
margin-top:5px;
margin-bottom:5px;
padding-left: 30px;
}

.zmota{
position: relative;
z-index: 0;
text-decoration:none;
}

.zmota:hover{
background-color: transparent;
z-index: 50;
}

.zmota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #fff;
text-decoration: none;
font-family:arial;
font-size:11px;
}

.zmota span img{
padding: 0px;
text-decoration: none;
}

.zmota:hover span{
padding:2px 5px 2px 5px;
visibility: visible;
bottom: 0px;
left:0px;
width:90px;
background:#000;
line-height:15px;
}
</style>

<div id="z-news">
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;

zimgwidth =100;
zimgheight =100;
zaBold = true;

text = "no";
showPostDate = false;

numposts = 5;
label = "Love";
home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-label.js" type="text/javascript"></script>

</div>

- Code trên là dùng cho từng nhãn, nếu muốn hiển thị bài viết của cả blog thì các bạn đổi link Javascript ở trên lại thành link bên dưới:

http://data.fandung.com/blog/demo/news-recent/desc-zart/desc-zart-post.js

Chúc các bạn thành công.

Read more…

[FD's BlOg] - Thông thường việc hiển thị ảnh và văn bản trên cùng 1 hàng chỉ dùng để trang trí các list hay danh sách nào đó. Và phổ biến nhất là dùng các đoạn code CSS, như thế tiện hơn. Đó là sử dụng chung và đồng nhất, còn việc sử dụng riêng lẻ thì sao?, ví dụ khi ta muốn chèn 1 ảnh icon nhỏ vào trước 1 menu hay 1 dòng nào đó.

Thông thường khi ta chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó thì ảnh sẽ nằm lệnh so với các đoạn văn bản, ví dụ như bên dưới :

ĐOẠN VĂN BẢN

Ta thấy là lề dưới của ảnh và đoạn văn bản được căn trùng nhau, như thế trông hơi bị lệch.

Việc này thì sẽ dễ dàng khắc phục khi ta dùng lệnh background, ví dụ như bên dưới:

ĐOẠN VĂN BẢN

Tuy nhiên khi dùng lệnh background ta phải sử dụng lênh padding để căn lề, nếu không dùng lệnh padding ta sẽ có kết quả như bên dưới :

ĐOẠN VĂN BẢN

Như thế ta sẽ thấy quá phức tạp khi phải dùng CSS chỉ để chèn 1 ảnh nhỏ vào trên cùng 1 hàng với các đoạn văn bản. Có 1 cách đơn giản hơn nhiều đó là ta sử dụng trực tiếp lệnh align cho thẻ img, như thế ta hoàn toàn có thế căn lề cho ảnh và cho đoạn văn bản.

Ví dụ :
1. Ảnh và văn bản nằm cân đối trên 1 hàng :
ĐOẠN VĂN BẢN

Để làm điều này ta chỉ cần chèn đoạn code màu đỏ vào trong thẻ img là được:
CODE:

<img src="link ảnh" align="middle" />

2. Ảnh và văn bản được căn lề trên trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="top" />

3. Ảnh và văn bản được căn lề dưới trùng nhau:
ĐOẠN VĂN BẢN

CODE:

<img src="link ảnh" align="bottom" />

Chúc các bạn thành công.

Read more…