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 xem ngay tại Blog của mìnhĐể 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 để phòng sai sót trong khi chỉnh sửa.
Tìm tới thẻ ]]></b:skin> và dán đoạn code sau trước nó
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);
}
Tiếp theo tìm tới đoạn code như dưới đây
.
.
.
.
</b:widget>
Và thay toàn bộ code đó bằng đoạn code sau
<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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ả.
