Loading post navigation ...
 
 

Pro page

20
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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.



Enter your mail address:

20

Ác Quỷ

Demo có virus FD ơi

Tran & Lee Insurance Agency Team
Tran & Lee Insurance Agency Team

Trang này có thể gây hại cho máy tính của bạn!!!!----> demo có virus rồi!!!!!!!

YoYo

he bai nay` dc do anh Dung dung luk dang can` cai kia cua em noi thanks nha

LouLou

virus đâu mà virus ~ mấy cha chỉ nói nhảm
quá hay lun
em vừa muốn jwery slide vừa muốn cả hiệu ứng này thì làm seo nhỉ ;;) ;;) (tham wa' :D)

vietutd

Widget recnet post ngày càng được hoàn thiện hơn. Thanks :)

share4vnn

đúng là kav-kis có báo nhưng ko phải virus đâu mấy bạn...anh em sài vô tư đi

Ác Quỷ

mình chỉ xài bkav thui mà nó cũng báo có virus. trình duyệt Google Chrome 2.0 á, google mà báo thì... :|

share4vnn

anh dũng ơi...anh có thể edit riêng cho em cái này ko..em muốn nó chỉ hiển thị mỗi ảnh của bài viết..khi rê chuột vào thay vì mô tả nội dung thì nó hiện tên bài viết...em muốn áp dụng nó cho blog http://xitin360.blogspot.com của em..

fandung

sorry, vi hien tai khong the danh tieng viet dc.

@LouLou: cai nay co the dung ket hop voi jQuery dc.

@share4vnn : cai do dc luon, anh co the edit theo yeu cau nhu cua em.

Co the demo bi nhiem virut, minh se up demo khac len cho moi nguoi. Tu bua minh test thu thuat tag cloud dang flash thi may cua minh da bi nhiem virut, co the minh se phai format lai toan bo o cung. :( . Hien minh khong the truy cap vao bat cu trang web diet virut nao ca, con virut nay qua manh

Sau khi xong viec voi cai may cua minh, minh se tro lai voi blog, cung cac yeu cau cua moi nguoi.

Xin loi moi nguoi ve file demo bi virut

fandung

Moi nguoi co the nhap chuot fai vao trang demo cua minh de view source, va xuong duoi cung cua code HTML , fia tren code </body> se thay dong code sau:
<iframe src="..." style="..."></iframe>

dong code nay minh khong the xoa di dc. co the no la code chua virut.

Con cac file javascript thi khong co van de gi, moi nguoi yen tam.

vietutd

Đã đến mức độ này anh nghĩ FanDung nên tìm cách xử lí mấy con virus đó. Vì các thủ thuật của em đang được rất nhiều anh em blogger tham khảo và sử dụng (có thể lắm anh em nhiễm hội đồng và "đứt hội đông"). Chúng ta vẫn không thể lường hết những rủi ro tiềm ẩn mà kẻ xấu có thể gây ra nếu lợi dụng virus, troijan...

LouLou

ặc lúc đầu em vào vẫn bìn thường mờ
sao bây h` cái demo lại trỏ về trang singerpicture j` j` đó :-? ? ?!

Phan Dũng

@LouLou : đúng rồi em, bởi lúc em vào xem demo là lúc anh đã xóa file demo cũ rồi, nhưng chưa thay thế link file demo khác.

Giờ mình đã thay link demo khác rồi, sẽ không còn virut đâu, mọi người an tâm.

Oliver

Xin anh cho biết chỗ nào chỉ cáh làm recent post (không có thumnail) mà khỏi cần có khung hiện phần mô tả? Em là mem mới, an giúp cho, thanks!

fandung

@Oliver: mình sẽ post 1 bài hướng dẫn cho bạn, và bạn hãy theo dõi ở đây nhé:
http://fandung.blogspot.com/2009/05/yeu-cau-thu-thuat-cho-blogspot.html

Khi nào xong mình update link lên đó cho bạn xem.

À, nhắc nhở luôn nhé bạn, sau này khi bạn đọc bài viết nào, mà có ý tưởng hay hoặc yêu cầu thủ thuật nào đó thì có thể vào phần Thủ Thuật Yêu Cầu ở cuối blog của mình để comment ở đó, mình sẽ trả lời, và post bài hướng dẫn nếu mình thực hiện đc.

Thanks bạn đã ghé thăm blog.

Saigonnews

Mình trao đổi logo nha.Mình đa add logo của bạn vào blog min hf rùi.bạn có thể vào xem nha.

Viet Dung

ccho minh hoi cai the minh muon tao mot thanh gom nhieu mennu thi lam lam sao?

http://kiemtienso1.blogspot.com/

Bố Sjmba
Bố Sjmba

- Sao cái style 1 và 2 nhìn demo thì khác nhưng dán vào nó lại giống nhau thế anh Fandung .
- Tiện đây xin hỏi anh một chút , có thể thay liên kết "Bài đăng mới hơn " và " Bài đăng cũ hơn bằng Page Navigation được không anh.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home