Thư viện

Trải nghiệm

Thứ Bảy, tháng 1 19, 2013

Bài viết mới nhất cuộn lên với Jquery cho Blogspot

Hiển thị một danh sách các bài viết gần đây bên sidebar của bạn là một cách tuyệt vời để giữ khách truy cập của bạn bận rộn. Có rất nhiều tiện ích bài viết gần đây bạn có thể sử dụng, nhưng namkna thủ thuật này chắc chắn sẽ gây sự chú ý của độc giả khi truy cập vào blog của bạn.

Chia sẻ:
Bài viết mới nhất cuộn lên với Jquery cho Blogspot
Hiển thị một danh sách các bài viết gần đây bên sidebar của bạn (Scrolling/Ticker Recent Post Gadget For Blogger) là một cách tuyệt vời để giữ khách truy cập của bạn bận rộn. Có rất nhiều tiện ích bài viết gần đây bạn có thể sử dụng, nhưng namkna thủ thuật này chắc chắn sẽ gây sự chú ý của độc giả khi truy cập vào blog của bạn.

Widget bài viết mới nhất (gần đây) này tương tự như các bài viết gần đây với hình thu nhỏ nhưng có thêm chức năng cuộn (Scrolling). Nó kết hợp các plugin vticker jQuery để tạo ra một hiệu ứng trượt đơn giản và kiểu dáng đẹp và cuộn các bài viết. Tiện ích được giới thiệu bởi stylifyyourblog.


Ảnh minh họa:

Bài viết mới nhất cuộn lên với Jquery cho Blogspot

Làm thế nào để add Scrolling Recent Post cho blogger?

1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Lay out)
3- Chọn Thêm tiện ích (Add gadget)
4- Tạo một widget HTML/Javarscip và Thêm đoạn code bên dưới vào:
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostticker.js" ></script>
<script style='text/javascript' src='http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://namkna.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
Trong đó:
  • Nếu blog bạn đã có thư viện Jquery thì hãy loại bỏ code màu xanh đi.
  • Thay http://namkna.blogspot.com/ thành URL blog của bạn.
  • numposts =7; là số lượng bài viết muốn hiển thị.
  • showItems:3 Số bài viết hiển thị trong 1 lần chuyển động.
  • speed: 500, thời gian chuyển động
  • pause: 3000, thời gian dừng sau mỗi lần chuyển động
  • var showpostthumbnails = true; hiển thị ảnh thumbnail nếu không muốn thì thay true thành false
  • var showcommentnum = false; Nếu muốn hiển thị số comment thì thay flase thành true
  • var showpostdate = false; Nếu muốn hiển thị ngày đăng thì thay flase thành true
  • var showpostsummary = false; Nếu muốn hiển thị mô tả thì thay false thành true
  • width:55px;height:55px Chiều rộng và cao của ảnh thumbnail
  • float:right Ảnh ở bên phải tiêu đề nếu muốn bên trái thì thay right thành left

Chú ý: 

Một điều rất quan trọng. Tiện ích có thể xảy ra tình trạng hiệu ứng di chuyển có thể khônghoạt động, có thể do mâu thuẫn giữa một số plugin jQuery đã có trong Blog của bạn, giải pháp phổ biến nhất để điều này là thêm mã sau đây vào cuối tiện ích:
<script type='text/javascript'>
jQuery.noConflict();
</script>
Nếu hiệu ứng di chuyển vẫn không làm việc thì bạn có thể loại bỏ bất kỳ plugin jQuery khác trong blog.

42 nhận xét:

  1. Bạn ơi !Cho mình "thọ giáo" vài điều với!
    Mình đã thử gắn code của bạn giới thiệu vào blog nhưng có lẽ do blog của mình đã gắn các icon cảm xúc nên hai code đó "đánh nhau" hay sao ấy.Khi mình gắn vô thì các icon biến mất hết và danh sách bài đăng đứng im lìm chứ không cuộn như mong muốn.
    Nhờ bạn chỉ cách giúp mình để chỉnh sửa lỗi này được không bạn?Vì mình rất thích hiệu ứng này.
    Cám ơn bạn trước nhé!

    Trả lờiXóa
    Trả lời
    1. Nhập đoạn này cuối tiện ích:

      <script type='text/javascript'>
      jQuery.noConflict();
      </script>

      Xóa
  2. Cám ơn bạn đã trả lời cho mình nhé!Mình đã thử thêm đoạn code vào nhưng nó vẫn đứng nguyên mà không cuộn bạn ạ.Hic!

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

    Trả lờiXóa
  4. Anh Nam Kha có thê kết hợp 2 bài này với nhau được không ạ.

    http://namkna.blogspot.com/2013/03/customize-bloggers-official-popularposts.html#.UUL2thzIaHO

    và bài viết phía trên.

    em đang dùng 2 tiện ích này của anh. Mong anh giúp đỡ ạ.....!

    Trả lờiXóa
    Trả lời
    1. 2 bài này khác nhay mà em. Một bài là bài viết mới nhất còn một bài là bài đăng phổ hiến. Em muốn kết hợp vào loại nào.

      Xóa
    2. Ý của em là có thể kết hợp bài viết: Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

      cuộn lên giống như bài viết mới nhất không ạ...!

      Xóa
    3. Đây là blog của em. Tất cả các thủ thuật em dùng đều là của anh hết đó ạ.

      http://thichhohap.blogspot.com/

      Anh xem và cho em nhận xét nhé. Tiện thể anh hướng dẫn em cách làm hiệu ứng trượt lên, xuống cho cột bên phải blog của em nhé....

      Xóa
    4. Tất nhiên là được nhưng em sẽ phải chấp nhạn một thực tế là sẽ làm chạm blog của em đi vì thủ thuạt đó cần có javarscipt.

      Xóa
    5. Phần hiệu ứng trượt em có thể mô tả rõ hơn ý tưởng của em không! :))

      Xóa
  5. Nếu Nam làm thêm cho anh em cái nút Tạm dừng- chạy tiếp được thì tốt quá
    thanks

    Trả lờiXóa
    Trả lời
    1. Cho thêm nút đó sẽ cần thêm 1 script khác. Đoạn scrip đó khá nặng như thế sẽ gây ảnh hưởng tới load nên minhg không cho vào.

      Xóa
    2. Cảm ơn Nam nhiều, nhờ Nam mình làm được cái Popular posts khá đẹp phù hợp với giao diện blog mình

      Xóa
    3. Không có gì rất vui vì có ích với bạn.

      Xóa
  6. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  7. Nam vui lòng cho hỏi mấy vấn đề nhé:

    1) Mình muốn bo tròn ảnh thumbnail thì làm thế nào vậy?
    2) Đổi màu của tiêu đề bài viết khác với màu của "nhận xét" (đối với bài hướng dẫn này)

    Mong bạn giúp nhé!
    Cảm ơn bạn!

    Trả lờiXóa
    Trả lời
    1. 1. Bo tròn ảnh sửa đoạn:

      img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}

      Thành:

      img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;border:1px solid #999;border-radius:50%;}

      2- ĐỔi màu tiêu đền bài viết: thêm trước thẻ ]]></b:skin>

      .clearfix a{color:#066 !important}
      .clearfix a:hover{color:#333 !important}

      #066 là mã màu chưa dê chuột.
      #333 là mã màu khi dê chuột

      Xóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. Cô mê những thủ thuật của cháu mà làm mãi không thành cô nhờ cháu chỉ giúp

    Trả lờiXóa
  10. trong blog honganh cô làm thành công rồi nhưng trong blog thiên đường khi cô thay đường linh của blog thiên đường vào là không có gì cả . không biết vì sao chau nhỉ? mong cháu chỉ giúp

    Trả lờiXóa
    Trả lời
    1. Cô xem lại xem blog đó đã đăng ký feed chưa nha cô. Nếu chưa thì cô làm theio bài này trước nha; Đăng ký và cài đặt Feedburner Atom cho Blogspot

      Xóa
  11. anh ơi - thay bài viết mới nhất bằng một nhãn được không gì !

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là được!
      Em tìm đoạn code như bên dưới:

      http://namkna.blogspot.com/feeds/posts/default

      thay thế nó thành:

      http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips

      Trong đó Blogspot-tips là tên nhãn muốn hiển thị nha.

      Xóa
  12. anh chỉnh khoảng cách giữa hai bài giúp em - nó cách xa quá anh ơi
    http://tinnet3s.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Em dán đoạn code bên dưới trước thẻ ]]><b:skin> nha:

      .clearfix {margin-top: -10px !important}

      Chỉnh lại -10px cho thích hợp nha.

      Xóa
  13. Bạn giúp mình tí nha. Mình Có cái thanh chạy ngang và một recen pot mà không có cái nào hoạt động được cả. Mình cũng đã xóa hết mấy cái java mà vẫn vậy. Cám ơn bạn nhiều

    Trả lờiXóa
    Trả lời
    1. Mình vào thấy nó hoạt động bình thường mà bạn.

      Xóa
  14. mình làm giống như cậu chỉ thì có hiển ra nhưng chỉ hiện tiêu đề cùng với ảnh chứ không có 1 đoạn nội dung kèm theo bên dưới, vậy làm thế nào để có cả 1 đoạn nội dung của bài đó ở dưới tiêu đề?

    Trả lờiXóa
    Trả lời
    1. Bạn phải thay đoạn bên dưới:

      var showpostsummary = false;

      thành:

      var showpostsummary = true;

      Trong bài viết mình có hướng dẫn ở phần tùy chỉnh rồi mà bạn.

      Xóa
  15. bài viết hay quá, cho chữ tiêu đề in đậm được ko vậy anh?

    Trả lờiXóa
    Trả lời
    1. Chữ tiêu đề nó đã in đậm rồi mà. Em có thể xem demo sẽ thấy rõ hơn .

      Xóa
  16. anh Nam ơi làm sao để có lằn gạch ngang ngăn cách giữa 2 bài vậy anh Nam,em làm nó không giống demo.

    Trả lờiXóa
    Trả lời
    1. Nếu chèn vào sidebar thì em thêm đoạn sau trước thẻ ]]></b:skin>

      .sidebar li{border-bottom:1px solid #bbb;}

      Xóa
  17. cho m hỏi tại sao khoảng cách giữa tiêu đề bài viết dòng trên với dòng dưới cách nhau xa vậy b? muốn cho gần lại ntn b? thanks...nè bạn: http://hotgirlbuonchuyen.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Câu hỏi của bạn chung chung vì trong blog của bạn có một số phần tiêu đề cách nhau rất xa, Trog comment này mình sẽ hướng dẫn trog bài viêt. Bạn tìm 2 đoạn bên dưới:


      .post {
      border-bottom:1px solid #EEEEEE;
      margin:0.5em 0 1.5em;
      padding-bottom:1.5em;
      }
      .post h3 {
      color:#955D4C;
      font-family:georgia;
      font-size:27px;
      font-weight:normal;
      line-height:1.4em;
      margin:0.25em 0 0;
      padding:0;
      }

      sửa lại thành:

      .post {
      border-bottom:1px solid #EEEEEE;
      margin:5px 0 5px;
      padding-bottom:5px;
      }
      .post h3 {
      color:#955D4C;
      font-family:georgia;
      font-size:27px;
      font-weight:normal;
      line-height:1.4em;
      margin:5px 0 0;
      padding:0;
      }

      mình đã đổi các thuộc tính em thành px giờ bạn chỉnh lại px của các thuộc tính mafrgin và padding trong 2 đoạn đã chỉnh sửa trên nha.

      Xóa
  18. Mình muốn lọc bài viết theo nhưng label khác nhau thì làm sao hả N ? cám ơn N

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

      <script src='http://namkna.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>


      thành:

      <script src='http://namkna.blogspot.com/feeds/posts/default/-/Tên nhãn?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

      Chỉnh lại tên nhãn thành tên nhãn bạn muốn sử dụng với thủ thuật này.

      Xóa
  19. Thanks N mình đã làm được còn nếu mình muốn dữ liệu với nhiều label có chọn lựa thì pải làm sao hả N

    Trả lờiXóa
    Trả lời
    1. Hiện tại đoạn code chạy với một label thôi bạn ak, hiệu ứng này cũng khá nặng nên nếu bạn đặt nhiều tiện ích sẽ khiến cho trang của bạn load chậm đó.

      Xóa