Thư viện

Trải nghiệm

Thứ Sáu, tháng 4 20, 2012

Recent posts với hiệu ứng trượt bằng jQuery

Recent post with thumbnail and jquery. bài viết mới cho blogspot

Chia sẻ:
Recent posts với hiệu ứng trượt bằng jQuery
Tiện ích recent post hôm nay namkna giới thiệu cho các bạn thêm 1 dạng bài viết mới. Tiện ích này có điểm đặc biệt là phần ảnh thumbnail, tiêu đề bài viết và đoạn trích dẫn mô tả chỉ hiện thị khi ta click thanh menu ngang chứa tên của bài viết.
Chắc hẳn nhiều người không còn xa lạ vói thủ thuật này viề đã có rất nhiều trang blog giới thiệu do vậy namkna cũng không biết nó do ai thiết kế à post lên nữa.


Ảnh minh họa:
Recent posts với hiệu ứng trượt bằng jQuery
Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sửa HTML

   4- Dán đoạn code sau vào trước thẻ đóng </head>..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(https://lh4.googleusercontent.com/-_-eoDLSWxGk/T5AyGYGSvTI/AAAAAAAABLk/GONv0zzm-HA/h120/arrow-square-namkna-blogspot-com.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

 5-bấm Lưu Mẫu  (save template) lại.

6. Tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-wm2RqrVKwTg/T493GPLRGSI/AAAAAAAABLI/MmvKZmefPzY/s320/nothumbnail-namkna-blogspot-com.gif";

showRandomImg = true;

jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;

jtext = "Comments";
jshowPostDate = true;

jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 10;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";

</script>

<div class="accordion">
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js" type="text/javascript"></script>
</div>
Trong đó
  • label = "Blogspot-tips"; là nhãn (laber) bạn muốn hiển thị. Thay Blogspot-tips thànht ên nhãn.
    home_page = "http:/namkna.blogspot.com/";  là URL địa chỉ blog của bạn.
  • numposts = 10; Số bài viết muốn hiển thị
  • jsummaryPost = 200; Số ký tự mô tả.
  • jimgwidth = 80; chiều rộng của ảnh thumbnail
  • jimgheight = 80; chiều cao của ảnh thumbnail
  • jfntsize = 12;  .
Nếu muốn hiển thị cho cả blog thì thay link scip:
http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js

Thành:
http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-post-fix.js
Chúc thành công!
(Web Designer Wall)

19 nhận xét:

  1. Cái này mình đang áp dụng, thủ thuật bên Fandung . bên mình nè Link

    Trả lờiXóa
  2. @Nguyễn Hải ™ Mình thấy trên diễn đàn blog của nước ngaoif nên giứi thiệu lại. Có thể họ cũng Copy của fandung cũng nên :3) :3)
    - Tiện ích này bạn nên cho số bài hiện vừa phải thui nếu cho nhiều quá nó sẽ chậm blog vì phải lấy feed đó :3) :3) .

    Trả lờiXóa
  3. mình muốn thêm chữ vào menu thì làm sao vậy admin, ad giúp mình với nha.

    http://nn5.upanh.com/b5.s29.d1/f83aa49d0606678dc10362514276a004_45709005.help1.jpg

    Trả lờiXóa
  4. @Admin bạn phải để địa chỉ blog lại mình mới có thể giúp bạn được. :3) :3) :3)

    Trả lờiXóa
  5. địa chỉ blog của minh nè http://www.thuthuat.hay3s.net/ bạn giúp mình phần này với nha. thank you!!!

    Trả lờiXóa
  6. @Admin Mình đã kiểm tra blog của bạn. Vấn đề bạn không thể thêm chữ vào menu là do trong quá trình Edit bạn đã xóa các đoạn code chứa nội dung của Menu nằm sau đoạn code <div id='bottommenucontainer'>

    Trả lờiXóa
  7. không phải mình xóa mà là code gốc của nó không có đó bạn. bạn chỉ mình cách thêm và dc hay không. mình cảm ơn

    Trả lờiXóa
  8. @Admin Thêm bằng cách bạn thêm các cặp thẻ sau vào trong thẻ menu:

    <li><a href='#'>Tên menu</a></li>

    Trả lờiXóa
  9. CẦN GIÚP ĐỠ.....SAU KHI LÀM CÁI RECENT POST NÀY THÌ CÁI Featured Posts BỊ LỖI ??? TẠI SAO VẬY??
    http://noigiove.tk

    Trả lờiXóa
  10. @Đào Đắc Đạt Bạn hãy chèn cả 2 code ở trên vào chung 1 wiget HTML/Javarscip nha không cần chèn vào template nữa.

    Trả lờiXóa
  11. Mình đã thử rùi vẫn bị lỗi cái Featured Posts . chán wa, cứ dk cái lọ mất cái chai =))))))))))) mình vẫn để trạng thái lỗi Featured Posts bạn qua thử xem lỗi gì hộ mình với

    Trả lờiXóa
  12. Chào anh, em chỉ muốn cái Recent posts hiện ra ở trang chủ thôi, vậy mà trang nào nó cũng hiện ra, lấn sân bài dăng của em, anh giúp em chỉnh nha! Anh coi xem chỉnh giúp em phần bố cục, em thấy nó thưa trông xấu quá. blog của em http://channuoi-thuy.blogspot.com/

    Trả lờiXóa
  13. muốn chỉnh sửa kích thước cao rộng thì làm sao bạn
    có j pm behamgroup chỉ mình với

    Trả lờiXóa
  14. @xinhtraj.11o2 Chỉnh rộng:

    .accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
    }


    - Chỉnh số đậm nha.

    - Còn cao bạn chỉ cần chỉnh lại các thông số:
    jsummaryPost = 200; Số ký tự mô tả.
    jimgwidth = 80; chiều rộng của ảnh thumbnail
    jimgheight = 80; chiều cao của ảnh thumbnail

    Trả lờiXóa
  15. Anh ơi, em muốn hiển thị cái này ở cuỗi mỗi bài đăng thì làm thế nào

    Trả lờiXóa
  16. Sao lâu rồi mà anh không rep nhỉ :(

    Trả lờiXóa
    Trả lời
    1. Xin lỗi em mấy hôm nay anh bận quá giờ mới có thời gian trả lời em.

      Em có thể thêm nó vào trong một tiện ích HTML ở cuối mỗi bài đăng là được nha em.

      Xóa