Tiện ích "Recent posts with thumbnail" có kèm theo hiệu ứng hiện thị mô tả bài viết khi rê chuột

[FD's BlOg] - Lần trước mình có post 1 bài về việc thêm hiệu ứng jQuery cho tiện ích "Recent posts with thumbnail" của VWG (Anhvo), hôm nay mình xin giới thiệu cho các bạn một thủ thuật nữa cũng được mình phát triển lên từ tiện ích "Recent posts with thumbnail", đó là việc thêm hiệu ứng mô tả bài viết khi ta rê chuột vào tiêu đề của mỗi bài.

Xem demo trực tiếp ở đây: (đã fix link demo) http://data.fandung.com/blog/demo/newposts-Description/fix-description.html

Đây là hình ảnh minh họa:

Ở bài viết này mình sẽ giới thiệu cho cả tiện ích bài viết mới cho blog, và tiện ích bài viết mới theo từng nhãn.

Với thủ thuật này, mình sẽ áp dụng thủ thuật mà mình đã từng giới thiệu, đó là thủ thuật hiện cửa sổ popup khi rê chuột vào ảnh. Với thủ thuật trước thì mình dùng ảnh gốc để hiển thị ở của sổ popup, còn với thủ thuật này thì mình dùng đọan mô tả vắn tắt (summary post) có sẵn ở tiện ích "Recent posts with thumbnail" để hiển thị trong ở cửa sổ popup.

☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tạo widget HTML/Javascript và dán code bên dưới vào :

// Code CSS
<style type="text/css">

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

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

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

</style>

// Code Javascript
<script language="JavaScript">
imgr = new Array();

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


showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

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

</script>
<script src="http://data.fandung.com/blog/demo/newposts-Description/Newposts-label_description.js" type="text/javascript"></script>

- Lưu ý:

a. Phần code CSS: mình sẽ chỉ nói về class .mota:hover span :
- Trước tiên : "không nên thay đổi tên của các id, class " trong code CSS. (do có liên quan tới file JS)
- top: 20px; , left:50px; : đây là code xác định vị trí hiển thị của popup
- width:250px; : độ rộng của popup, còn chiều cao sẽ tự thay đổi tùy vào nội dung hiện thị trong nó dài hay ngắn.
- background:#ccc; : màu nền
- text-align: justify; : tự động căn giữa cho văn bản.

Đây là hình minh họa:

b. Phần code Javascript: mình sẽ chỉ nói các đọan cơ bản, còn những code khác các bạn có thể tự tìm hiểu.
- numposts = 6; : số bài hiển thị
- label = "Love"; : nhãn mà bạn chọn để hiển thị các bài viết.
- home_page = "http://fandung.blogspot.com/"; : địa chỉ URL blog của bạn
- summaryPost = 150; : số kí tự sẽ hiển thị trong popup mô tả.

- Code trên là dùng cho các bài viết theo nhãn, nếu các bạn muốn hiển thị các bài viết mới cho cả blog thì đổi link của file javascript lại thành : http://data.fandung.com/blog/demo/newposts-Description/Newposts_description.js

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