Tin mới đăng:

Bài đăng phổ biến với Thumbnail hiệu ứng xoay

Bài viết 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ồ.
    Để 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 không trình bầy nữa. 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.
          Các bạn có thể xem Demo tại trang www.xuandoanh.com

» Các bước tiến hành thủ thuật như sau:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>
#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);
}
5. 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>
6. 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 == "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>
6. 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 có sẵn của blog nhớ check vào 3 ô
- Ảnh thumbnail
- Đoạn trích
- Thời gian tùy chọn
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
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật