Tiện ích Popular Posts với CSS3

Trang chủ » Thủ thuật » Tiện ích Popular Posts với CSS3

Tiện ích Popular Posts với CSS3

5 thg 12, 2013

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ẹ.

Demo

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:

#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);}

Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:

Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, 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>