Random Post

  • Truyện tranh chế ảnh troll : Ngu vãi cả tiếng vịt kêu thêm dấu á
    Truyện tranh chế ảnh troll : Ngu vãi cả tiếng vịt kêu thêm dấu á
    19/12/2013 - 0 Comments

  • Doremon chế 39
    Doremon chế 39
    23/03/2013 - 0 Comments

  • MobiFone và VinaPhone sẽ không còn là “anh em”
    MobiFone và VinaPhone sẽ không còn là “anh em”
    05/10/2013 - 0 Comments

    “Sau tái cấu trúc VNPT chắc chắn một trong 2 mạng viễn thông MobiFone và Vinaphone sẽ phải ra khỏi tập đoàn VNPT”.Đây là khẳng định của ông Nguyễn…

  • Tuyển tập hình nền đẹp cho ngày lễ giáng sinh
    Tuyển tập hình nền đẹp cho ngày lễ giáng sinh
    28/11/2013 - 0 Comments

    Những hình nền đẹp cho ngày lễ giáng sinh - noelSắp đến ngày giáng sinh xin gửi đến các bạn bộ hình nền giáng sinh đẹp giúp trang hoàng máy tính. Để…

  • 5 phút để giấu kín toàn bộ quá khứ trên Facebook
    5 phút để giấu kín toàn bộ quá khứ trên Facebook
    04/10/2013 - 0 Comments

    Tính năng tìm kiếm Graph Search của Facebook có thể đào bới tới cả check-in, cập nhật trạng thái, note và bình luận của người sử dụng kể từ khi họ sử…

  • Tin nhắn SMS xin lỗi người yêu, bạn bè hiệu quả
    Tin nhắn SMS xin lỗi người yêu, bạn bè hiệu quả
    13/12/2013 - 0 Comments

    Tuyển tập tin nhắn xin lỗi người yêu, bạn bèChắc chắn trong tình yêu, tình bạn không thể tránh khỏi những lúc hiểu nhầm, giận dỗi. Những sự hiểu…

  • Ảnh - Charles de Gaulle tàu sân bay hạt nhân lớn thứ 2 thế giới
    Ảnh - Charles de Gaulle tàu sân bay hạt nhân lớn thứ 2 thế giới
    21/05/2013 - 0 Comments

    Tàu sân bay Charles de Gaulle (Pháp) được xem là tàu sân bay chạy bằng năng lượng hạt nhân lớn thứ 2 thế giới đang hoạt động. Hiện nay, trên thế…

Thứ Hai, 11 tháng 3, 2013

Popular Post (bài viết xem nhiều) dạng ảnh Gallery cho blogspot

Lang thang qua Blog của Namkna mình có thấy 1 thủ thuật dành cho blogspot khá hay, đó là chỉnh sửa tiện ích thống kê bài viết theo thời gian (tháng, tuần) dạng hình ảnh.
Bài viết như sau:
Bài viết này sẽ hướng dẫn các bạn cách sửa đổi giao diện cũ nhàm chán của blogger. Trong thủ thuật này các bài viết phổ biến sẽ hiển thị dưới dạng ảnh thumbnail và có tóm tắt trên nền thumbnail đó. Tiện ích thích hợp với các blog chia sẻ hình ảnh, bán hàng. Với các blog chia sẻ thông tin thì sẽ không hợp cho lắm (tất nhiên vẫn có thể áp dụng nếu bạn thấy thích).
DEMO
☼ Bước 1: Tạo một tiện ích Popular post.
- Nếu blog bạn đã có tiện ích Popular post rồi thì có thể bỏ qua bước này tiến hành luôn bước 2:
1- Đăng nhập vào Blog
2- Vào mẫu (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:
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 định Id của tiện tích popular post và cài đặt các thông số.
☼ Bước 2: Tùy chỉnh tiện ích Popular post.
1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây trước thẻ ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Tùy chỉnh:
width:110px; là chiều rộng của hình ảnh thumbnail.
height:110px; là chiều cao của hình ảnh thumbnail.
5- Tìm code của tiện ích popular post đã tạo ở bước 1 với id PopularPosts1 như sau:

<b:widget id='PopularPosts1' locked='false' title='Popular post' type='PopularPosts'/>

- Thay thế thành đoạn code bên dưới:

<b:widget id='PopularPosts1' locked='false' title='Popular post' 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'>
<li>
<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-content'>
<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 -->
<div class='item-content'>
<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 class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6- Lưu mẫu lại và xem kết quả nha.



Nguồn: Namkna

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

Đăng nhận xét