Bài Đăng Phổ Biến Với Thumbnail Hiệu Ứng Xoay

Bài Đăng Phổ Biến Với Thumbnail Hiệu Ứng Xoay
Mấy bài trước mình đã chia sẻ cùng các bạn về tùy biến bài đăng phổ biến với dạng 2 cột,3 cột và hiệu ứng trượt cùng 3D.Bài này mình muốn chia sẻ cùng các bạn 1 hiệu ứng trông cũng khá ngộ nghĩnh đó là ảnh thumbnail xoay 360 độ tùy thuộc vào việc chỉnh dấu - hay + ảnh sẽ xoay ngược hoặc cùng chiều kim đồng hồ.
Demo:

DEMO

Để tạo được tiện ích này ta cần tiến hành chỉnh sửa mẫu,các bước để tới phần chỉnh sửa mẫu chắc các bạn đã biết rồi tôi ko trình bầy nữa nhé.Vì code trong thủ thuật này hơi dài nên các bạn nên lưu mẫu trước khi thực hiện thủ thuật để đề phòng sai sót trong khi chỉnh sửa.

1-Tìm tới thẻ ]]></b:skin> và dán đoạn code sau trước nó
#PopularPosts1 {
max-width: 280px
}
#PopularPosts1 dd {
float: left;
border-bottom: 1px dashed; color:#32CD32;
margin: 10px;
background: none;
display: block;
padding: 0
}
#PopularPosts1 img {
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s 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(-360deg);
-webkit-transform: scale(1.2) rotate(-360deg);
-o-transform: scale(1.2) rotate(-360deg);
-ms-transform: scale(1.2) rotate(-360deg);
transform: scale(1.2) rotate(-360deg);
-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);
}

2-Tiếp theo tìm tới đoạn code như dưới đây
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.
.
.
.
</b:widget>

Và thay toàn bộ code đó bằng đoạn code 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='https://lh3.googleusercontent.com/-PBcbjmP-UqQ/UZD1PRoBq6I/AAAAAAAAZtc/nESFFqu4XNI/s48/DautoCrazy.Blog-default-image.jpg' 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>

Bây giờ bạn lưu mẫu lại và trở lại Blog xem kết quả.
Lưu ý khi mở tiện ích bài đăng phổ biến sẵn của blog nhớ check vào 3 ô
- Ảnh thumbnail
- Đoạn trích
- Thời gian tùy chọn
Nguồn:Internet
Nhận xét

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