jQuery Google Buzz Widget

Đăng bởi Neo trong mục Hướng dẫn vào 17 tháng 2, 2010 | Comments
Xem Demo

Google Buzz Widget là plugin của jQuery giúp bạn gắn "buzz" từ Google Buzz vào trang web của mình. jQuery Google Buzz Widget hoạt động trên hầu hết các trình duyệt hiện tại, dễ sử dụng và bạn cũng dễ dàng thay đổi giao diện với CSS.

Các tính năng chính

  • Thể hiện buzzes với hiệu ứng trượt hoặc danh sách
  • Có nhiều hiệu ứng : opacity, height, font-size
  • Các phần khác của một buzz (như links, ngày tháng) đều có các class CSS riêng để tiện tùy biến
  • Ẩn/hiện phần nào đó của buzz như ngày tháng, nguồn.
  • Bạn cũng có thể chọn thể hiện toàn bộ nội dung của buzz

Cách sử dụng

Trước tiên, bạn cần download jQuery, và Google Buzz Widget. Sau đó thêm vào trong thẻ <head> như sau: 

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- Google Buzz Widget -->
<script type="text/javascript" src="js/jquery.google-buzz-1.0.min.js"></script>

Bạn có thể thêm các tùy chọn vào trong thẻ HTML như sau:

<div class="google-buzz" options="{
   username:'hoainam12k'
   ,n:9
   ,show_n:3
   ,animate:'height'
}">loading..</div>

Hoặc bạn có thể sử dụng theo cách thông thường:

<script type="text/javascript">
  $(document).ready(function(){
    $('div.my-buzz').googleBuzz({
      username:'hoainam12k'
      ,n:8
      ,show_n:0
    });
  });
</script>
<div class="my-buzz">loading..</div>
jquery, plugin

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter