Thư viện

Trải nghiệm

Chủ Nhật, tháng 12 25, 2011

Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot

Thủ thuật hiển thị tiêu đề bài viết cùng với ảnh mô tả thu nhỏ của bài viết chuyển động từ trên xuống mượt mà và đẹp mắt

Chia sẻ:
Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
Thủ thuật này chỉ hiển thị tiêu đề bài viết cùng với ảnh mô tả thu nhỏ của bài viết đó. Nó được tích hợp hiệu ứng từ thư viện Jquey  tạo sự chuyển động của các ô bài viết rớt từ trên xuống mượt mà và đẹp mắt. Vê cơ bản nó giống với tiện ích bài viết mới nhất có ảnh thu nhỏ và mô tả dạng chuyển động từ dưới lên mà mình đã từng giới thiệu tại đây.

Để thấy rỏ hơn về thủ thuật này thì bạn hãy xem phần demo ở bên dưới hoặc ảnh minh họa bên cạnh.

Xem Demo

☼ Cách thêm tiện ích Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot

1. Đăng nhập tài khoản bloggerBài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
2. Chọn Thêm tiện ích và Tạo thêm 1 HTML/Javascripts
3. Thêm code bên dưới vào phân nội dung của tiện ích vừa tạo:
<style type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
height:450px; /* độ cao của tiện ích*/
}
#spylist ul{
overflow:hidden;
list-style-type: none;
padding: 0px;
}
#spylist li {
border:1px dotted #0000ff;
width:208px; /* độ rộng của tiện ích*/
margin:0px 0px 5px 0px;
padding:2px 1px 2px 2px;
list-style-type:none;
float:none;
height:60px; /* độ cao của mỗi tiêu đề bài viết*/
overflow: hidden;
background:url(http://2.bp.blogspot.com/-CsScqvhxhLs/T4RjScfWyyI/AAAAAAAABA4/LbBZDf3jmT8/s1600/vff-namkna-blogspot-com.png); /* màu nền của tiện ích*/
}
#spylist li a {
text-decoration:none;
color:#0066cc;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{
text-decoration:underline;
color:#ff0000;
}
#spylist li img {
float:left;
margin-right:5px;
border:1px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ff0066;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
</style>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img138.imageshack.us/img138/7159/noimage.jpg";
limitspy = 6;
intervalspy = 4000; 
showRandomImg = true;
boxwidth = 255;
cellspacing = 0;
borderColor = "#000000";
bgTD = "#fff";
thumbwidth = 60; 
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no"; 
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "";
icon2 = " ";
numposts = 10;
label = "Blogspot Recent post"; 
home_page = "http://namkna.blogspot.com/"; 
</script>
<div id="spylist">
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_post_spy.js" type="text/javascript"></script></div>
» Tùy chỉnh code:
  • Lưu ý: Các bạn nên download file js về sau đó Upload lên host riêng để dùng lâu dài. Nếu chưa có host thì bạn có thể tham khảo host miễn phí tại đây.
  • limitspy = 6; Là số bài trình diễn (những bài viết mà bạn luôn luôn nhìn thấy)
  • intervalspy = 4000;  Là tốc độ chuyển đổi bài viết , Đơn vị tính là phần nghìn của giây. Trong trường hợp này là 4 giây chuyển đổi bài viết một lần.
  • thumbwidth = 60; Là độ rộng ảnh thu nhỏ thumbnail.
  • thumb thumbheight = 60; Là độ cao ảnh thu nhỏ thumbnail.
  • text = "no"; Là số comment của bài viết đó. Nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"
  • numposts = 10;  Là số bài viết hiển thị
  • summaryFontsize = 10; //kích thước của chữ trên tiện ích.
  • home_page = "http://namkna.blogspot.com/"; Là địa chỉ blog bạn muốn hiện thị bài viết bạn có thể thay thành địa chỉ blog của bạn hoặc bất kỳ trang nào bạn muốn (chỉ lấy bài của những trang có feed nha
  • label = "Blogspot Recent post"; Là nhãn bạn muốn hiện thị bài viết chứa trong đó. Hãy thay phần tô màu thành nhãn của bạn. (nếu hiển thị theo bài viết của toàn blog thì không cần quan tâm phần này).
  • Nếu bạn muốn hiển thị theo từng nhãn thì hãy thay file script trên (recent_post_spy.js ) thành
    http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_label_spy.js

4. Cuối cùng Lưu tiện ích lại và quay trở lại .
(Fandung)

22 nhận xét:

  1. :-
    Sao mình làm không được, nếu để nguyên địa chỉ Blog của bạn thì nó hiện lên, còn thay địa chỉ Blog của mình thì nó không hiện. Giúp mình với, địa chỉ Blog của mình là http://tahaefments.blogspot.com

    Trả lờiXóa
  2. @tahaefment Bạn cú ý Blog của bạn phải đăng ký Feeds nha. = Bạn đăng ký feeds sau đó cho vào phần thiết kế - Cài đặt -nguồn cấp trang web nha.
    - Nếu bạn chọn hiển thị cho 1 laber (Nhãn) thì bạn phải thay tên nhãn nha.

    Trả lờiXóa
  3. Chào Namkna mình chả biết comments vấn đề mình cần hỏi ở đâu cả, tiện đọc bài này thì cho mình hỏi bạn có rành về XML không, và có tài liệu cơ bản của XML không share cho mình với.
    Tks trước :))

    Trả lờiXóa
  4. @Nguyễn Doãn Đức Tài liệu thì mình không có :(.
    Đa số mình tụ mày mò học hỏi thôi. Các biến XML bạn mình tự tìm hiểu thông qua các theme của mọi người :)
    - Nếu chú ý bạn có thể thấy tất cả đều liên quan với nhau theo 1 logic. Mình ví dụ nếu bạn muốn chỉnh Siderbar (2 cột 2 bên) thì bạn tìm các biến dạng:
    .Sidebar{......} hoặc: #Sidebar{...... }
    .Sidebar a:hover là hiệu ứng link

    - Ngài ra các thông số nằm trong các ngoặc { ....} như:
    + Width:...px; là chiều rộng
    + Height:...px; là chiều cao
    + color:#.... là màu
    + float: ... là căn chỉnh gồm left:trái, right:phải, center:giữa.
    + Boder:...px là viền bao quanh ảnh hoặc chữ.
    + background:#... là màu nền
    + background:url(Link ảnh) là ảnh nền
    + repeat-x là lặp lại hình ảnh áp dụn với các menu.
    - nói chung nếu hiểu các thông số này thì bạn có thể tùy biến Blog của bạn như ý muốn :P

    Trả lờiXóa
  5. tks :))
    Những thuộc tính này mình có biết :))
    Nhưng ý mình hỏi là cấu trúc của nó á :-t
    Mấy cái thẻ gì mà


    Ví dụ như vài thẻ như vậy trong tem còn nhiều thẻ lạ hơn nữa.
    Những thẻ về HTML và CSS mình cũng nắm được chút chút rồi mấy cái thẻ mới này mình chịu.
    Nếu bác biết mong bác chỉ giúp:))

    Trả lờiXóa
  6. @Nguyễn Doãn Đức Bạn có thể xem thêm một số lý thuyết cơ bản về bố cục trang blog TẠI ĐÂY

    Trả lờiXóa
  7. KG CHẠY VỚI FIREFOX . DEMO TIN MỚI NHẤT KG CHẠY http://www.thuthuatmang.net/

    Trả lờiXóa
  8. @ThuThuatMang.Net Mình đã Fix lại lỗi rồi đó bạn. Bạn có thể Xem Demo thì sẽ rõ ngay thôi :3) :3) :3) :3)

    Trả lờiXóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. Namkna Hay Quá, Test chạy OK với 4 trình duyệt : Firefox 8, IE 9, Opera va Chrome.
    http://www.thuthuatmang.net
    Mình không biết tắt cái mã bảo vệ comment

    Khi nào bạn rãnh nhờ bạn xem giúp,sao cái Slidebar bên phải nó load chậm quá chừng. Thanks.

    Trả lờiXóa
  11. @ThuThuatMang.Net Bạn vào Cài đặt => nhận Xét =>< Bỏ phần xác nhận cho nhận xét đi là Ok. :1)

    Trả lờiXóa
  12. bạn cho mình hỏi cách đang kí feeds cho blog để có thể chạy được thủ thuật này dc ko bạn

    Trả lờiXóa
  13. @Admin Mình viết song bài hướng dẫn đang ký feed rùi đấy bạn vào đây để xem nha: Cách đăng ký và sử dụng FeedBurner cho Blogspot:3) :3) :3) :3)

    Trả lờiXóa
  14. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  15. Sao nó chỉ hiện được một lần ah, rồi nó ko chạy nữa là sao vậy bạn

    Trả lờiXóa
  16. @Cường Trần Mình đã test thử vẫn chạy Ok. bạn hãy để địa chỉ blog bạn áp dụng không thành công lại đây mình sẽ sem giúp.

    Trả lờiXóa
  17. Chào các bạn!
    Mình xin giới thiệu một công cụ tạo widget Bài Viết Mới Nhất với nhiều tùy chọn sau:
    -Bài viết mới nhất trên toàn blog
    -Bài viết mới nhất trong một nhãn
    -Không/Có hiển thị hình thu nhỏ
    -Không/Có hiển thị số comment
    -Không/Có hiển thị trích đoạn
    -Không/Có hiển thị button Read More
    ...
    Và còn nhiều tùy chọn khác như màu sắc cho từng thành phần trong widget đang chờ các bạn tìm hiểu. Hơn nữa khi sử dụng tiện ích này các bạn hoàn toàn không phải động chạm gì đến template hay viết code thủ công mà chỉ vài lần click chuột để tạo widget cho mình. Đặc biệt hơn các bạn có thể sử dụng chức năng Xem Trước của công cụ để tạo cho mình một widget đẹp nhất trước khi quyết định thêm vào blog hay không
    Để sử dụng công cụ thú vị này để tạo widget Bài Mới Nhất cho blog bạn vào đây

    Trả lờiXóa
  18. Bạn ơi cho mình hỏi, mình ko muốn bài đăng trượt lên mà muốn bài đăng đứng yên thì làm sao

    Trả lờiXóa
    Trả lời
    1. Bạn sửa đoạn

      aBold = true;

      thành:

      aBold = false;

      Xóa
  19. bạn xem giúp mình với nhé. blog của mình có feed rồi, nhưng mà cài code không sao chạy được. chỉ hiển thị nguyên cái khung thôi. Cho mình cảm ơn trc nhé!

    http://bdsdaithuy.blogspot.com

    Trả lờiXóa