Hiển thị Bài đăng phổ biến dạng ảnh xoay tròn từ CSS3 cho blog

Đăng bởi Admin | 15/7/13 | 0 nhận xét

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):

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 địnhId 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.
6- Lư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!

Xem thêm:

Theo: Namkna

Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

15/7/13