Thư viện

Trải nghiệm

Thứ Năm, tháng 10 27, 2011

Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger

Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ. tạo hiệu ứng ảnh chuyển động xoay tròn khi bạn chỉ chuột vào ảnh

Chia sẻ:
Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ. tạo hiệu ứng ảnh chuyển động xoay tròn khi bạn chỉ chuột vào ảnh
Các bạn hãy xem Demo để thấy rõ hơn.

XEM DEMO

Ảnh minh họa:
Popular Posts xoay tròn với CSS3 cho blogger

☼ Bước 1: Thêm Tiện ích Bài đăng phổ biến (Add widget Popular posts):

1- Đăng nhập vào Blog
2- Vào Bố cục (Template)
3- Chọn Thêm Tiện ích (Add Widget)
4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này):
Popular Posts xoay tròn với CSS3 cho blogger
5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác định Id của tiện tích popular post và cài đặt các thông số.

Tiện ích Popular Posts với CSS3 cho blogger
- Trong trường hợp này thì id của tiện ích bài đăng phổ biến là popularposst1.
6Lưu lại thiết lập.

☼ Bước 2: Tùy biến Tiện ích Bài đăng phổ biến (Add widget Popular posts):

1- Bạn Vào Mẫu (Template)
2- Chỉnh Sửa HTML (không cần mở rộng tiện ích mẫu).
3- Chèn đoạn CSS bên dưới vào trước thẻ ]]></b:skin>
#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
- Trong đó là popularposst1 id của tiện ích bài đăng phổ biến bạn vừa tạo.

4- Tìm đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
- Thay thế nó bằng đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'  rel='bookmark'><img expr:alt='data:post.title'  expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title'  rel='bookmark'><img alt='no image' height='60px'  src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'  width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


5- Lưu lại mẫu và kiểm tra kết quả.
- Hãy kết hợp bài viết "ẩn bài viết bất kỳ trong tiện ích Popular Posts" Để tiện ích chuyên nghiệp hơn.
Chúc thành công!

11 nhận xét:

  1. Bạn có widget nào tạo popular post nhìn cho nó gọn nhẹ không ?, mình thấy cái popular có trong blogger thì nó không gọn gàng lắm, nhìn nó thưa thớt và xấu :)

    Trả lờiXóa
  2. @TDT Bạn có thể xem thử cách khác này popular post:3) :3) nhưng nó còn rắc rối hơn cách này nhiều :3) :3)

    Trả lờiXóa
  3. Có cách nào kết hợp cái này và thêm trích dẫn như cái popular posts của anh không?

    Trả lờiXóa
  4. Nam ơi cho mình hỏi muốn tạo popular post cho bài viết mà k sử dụng cái Gadget Popular Post trong tiện ích của Blogger thì phải làm thế nào vậy. Ý mình là muốn tạo 1 code xong paste vào cái gadget HTML/JavaScript thôi. Nam chỉ dùm mình với nha. Thanks

    Trả lờiXóa
    Trả lời
    1. nếu làm như bạn sẽ phải sử dụng đến 5 file javácript sẽ làm blog bạn load cực chậm đó. Tiện ích populảpost của blogger được đánh giá rất cao đó bạn.

      Xóa
  5. em đã làm đúng theo những gì hướng dẫn nhưng ảnh vẫn không hiện lên
    quá nản :(. Mong anh giúp đỡ
    mail em: saosangdemdong.94@gmail.com
    rất mong nhận được sụ giúp đỡ của anh, cảm ơn anh rất nhiều

    Trả lờiXóa
    Trả lời
    1. Hiện tại anh thấy ảnh đã hiện nhưng chưa có CSS để xoay thôi êm chèn thêm css trên bài vào nha,

      Xóa
  6. anh cho em hỏi là có cách nào để cho nó hiện lên những bài viết được theo dõi nhiều nhất những mà chỉ là của một tab được hả anh

    Trả lờiXóa
    Trả lời
    1. Đây là tiện ích bài đắng phổ biến nên những bài hiển thị ở đây đều là bài dược theo dõi nhiều em ak. Nếu em không muốn cho hiển thị bài viết nào thì em chỉ cần làm theo bài sau: Ẩn một bài viết bất kỳ trong tiện ích Popular Posts

      Xóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa