Thư viện

Trải nghiệm

Thứ Bảy, tháng 5 21, 2011

Tiêu đề bài đăng mới với hiệu ứng chạy ngang

Chia sẻ:
Để cho khách tham quan thuận tiện lựa chọn bài để xem, bạn có thể tạo thanh tiêu đề các bài mới đăng trên Blog với hiệu ứng chạy từ phải sang trái hoặc ngược lại.
Tiện ích này sử dụng feed để lấy dữ liệu bài đăng, không lấy các ảnh thumb do vậy các bạn có thể yên tâm nó không ảnh hưởng nhiều tới tốc độ load blog của ban.
Đây là Demo cho bạn:

Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phần Tử Trang
   4- Chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán toàn bộ code này vào:
<script style="text/javascript" src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/scrolling_blogger_posts.js">  </script>
<script style="text/javascript"> 
var nMaxPosts = 15; 
var sBgColor;
var nWidth;
var nScrollDelay = 175;
var sDirection="left";
var sOpenLinkLocation="N";
var sBulletChar="•";
</script> 
<script style="text/javascript" src="http://namkna.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>
- Trong đó:
  • Thay  http://namkna.blogspot.com thành URL (địa chỉ) blog của bạn.
  • var nMaxPosts = 15; là số lượng bài mới được lấy từ feed. (Blog bạn phải cài feed trước khi thựch iện thủ thuật này nha, nếu chưa cài thì xem hướng dẫn Tại đây).
  • var sDirection="left"; Chiều chạy của chữ, trường hợp này là từ trái qua phải, nếu muốn chạy ngược lại từ phải sang trái thì thay từ "left" thành "right".
  • var nScrollDelay = 175; Là tốc độ của hiệu ứng (số càng nhỏ tiêu đề chạy càng nhanh và ngược lại)

   4- Click chọn  Lưu   lại và xem thành quả.

Mách nhỏ: Bạn nên đặt tiện ích này phía trên bài đăng hoặc trong tiện ích sticky banner, nabar on top, nhìn sẽ đẹp hơn.
Ngoài ra bạn cũng có thể gắn cho thủ thuật này các hình ảnh mặc định để đẹp hơn, hãy tham khảo cách đó  TẠI ĐÂY
Chúc bạn thành công!

19 nhận xét:

  1. Từ giờ tôi tham khảo trên mạng chưa thấy ai tạo chữ chạy với phong cách liền lạc như dòng tiêu đề bài hát chạy ngang qua logo nhạc Zing mp3
    Ví dụ như trang đây: dòng chữ " Tiếng Quảng rẹt luôn -Đông Quân"
    http://www.phantunghiahanh.com/2012/06/tieng-quang-ret-luon.html
    Còn cách chữ chạy trên bloger thấy nó chạy lựt khựt không mê nỗi. Sao các nhà Pro tin học không nghiên cứu viết code như thế nhỉ.

    Trả lờiXóa
  2. Link hỏng rùi bác ơi :1)
    http://tanchau123.blogspot.com

    Trả lờiXóa
  3. @Tanchau123 Bác chém gió làm mình cứ tưởng hỏng thật nhìn lại thấy Demo chạy ầm ầm kai.

    Trả lờiXóa
  4. @Tú Phan Đoạn Scr\p đó mình có tuy nhiên dang nghiên cứu để chèn vào blog cho đỡ rối.

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

    Trả lờiXóa
  6. code naỳ bỏ trong widget, bài viết thì được nhưng bỏ trực tiếp vào template thì ko được, nó báo lỗi ko nhận & tại alt=json-in-script[&]callback=RecentPostsScrollerv2 :4)

    Trả lờiXóa
  7. @Tú Phan
    cái trong zing mp3 là định dạng flash
    còn text của web thì phải cần nhiều javascipt mới mượt được

    Trả lờiXóa
  8. @Thao Trinh Đúng rồi đó là họ chạy chữ trên nền flash của bên longtai video thôi.

    Trả lờiXóa
  9. @Thao Trinh Nếu chèn vào template thì phải sửa trong file js:
    lt=json-in-script[&]callback=RecentPo
    thành:
    lt=json-in-script[&amp]callback=RecentPo

    Trả lờiXóa
  10. Mình thêm code vào thì khi chạy web nó báo : cannot read "link" undefined ! Hic, giờ phải làm sao ?

    Trả lờiXóa
  11. mình muốn nó chạy từ dưới lên và khi rê chuột vào dừng lại thì làm thế nào bạn?

    Trả lờiXóa
    Trả lời
    1. Sửa:
      var sDirection="left";

      thành"

      var sDirection="up";

      Xóa
  12. Nhưng khi rê chuột vào nố đâu có dừng? Có cách nào khác không Nam?

    Trả lờiXóa
  13. Và mình muốn khoảng các giữa các tiêu đề nó xa hơn một chút nữa, để như vậy nó rối quá.

    Trả lờiXóa
  14. tăng size chữ cho nó to lên đc ko b? như blog mình thì m muốn nó nằm trên trang giấy thì đặt chỗ nào b? giúp mình nhé: http://hotgirlbuonchuyen.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn đặt cả đoạn code vào trong đoan bên dưới"

      <div class='namkna1'>
      code ở đây
      <div>
      <style>
      .namkna1{font-size:14px}
      </style>

      Xóa
  15. Mính làm và cũng giống bạn tan phu nha dat, khi xem blog thì nó báo: cannot read "link" undefined ! Hic, giờ phải làm sao ?, Anh Nam khắc phục sao ạ? Thanks anh

    Trả lờiXóa