Random Post

  • Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot
    Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot
    07/10/2013 - 0 Comments

    Đối với Slider thì việc sử dụng làm điểm nhấn cho blog, website là điều cần thiết. 1 Slide đẹp và mượt mà luôn được người dùng hướng tới. Bài viết…

  • Đăng kí Facebook (FB) - Hướng dẫn cách mới và nhanh nhất
    Đăng kí Facebook (FB) - Hướng dẫn cách mới và nhanh nhất
    31/03/2013 - 0 Comments

    Đăng kí Facebook không còn là 1 điều quá xa lạ nếu bạn đã từng sử dụng FB. Tuy nhiên sẽ có 1 chút khó khăn đối với bạn mới bắt đầu sử dụng Facebook.…

  • Tắt chức năng hiển thị mật khẩu trong Windows 8 khi đăng nhập
    Tắt chức năng hiển thị mật khẩu trong Windows 8 khi đăng nhập
    08/10/2013 - 0 Comments

    Bài viết sẽ hướng dẫn bạn tắt nút hiển thị mật khẩu trong màn hình đăng nhập Windows 8/8.1 bằng cách tùy chỉnh Registry hoặc chỉnh trong Local Group…

  • Bộ ảnh bìa các loài Hoa đẹp nhất cho Facebook
    Bộ ảnh bìa các loài Hoa đẹp nhất cho Facebook
    17/09/2012 - 0 Comments

    Dưới đây là bộ ảnh bìa các loài hoa đẹp nhất dành cho các bạn sử dụng Facebook Timeline ^^. Các bạn nhớ bấm vào hình để phóng lớn lên trước khi lưu…

  • Template Shop bán hàng Online cho Blogspot - Blogger đẹp
    Template Shop bán hàng Online cho Blogspot - Blogger đẹp
    01/09/2013 - 0 Comments

    Khi đến với blogspot, bạn lo ngại vì nó không có nhiều chức năng như bạn mong muốn. Nhiều Blogger đã sử dụng Blog của mình như 1 gian hàng online cho…

  • Thêm "Bạn cũng có thể thích" cho blogspot
    Thêm "Bạn cũng có thể thích" cho blogspot
    06/09/2013 - 0 Comments

    - Bài viết này itviet360 chia sẻ với bạn Thủ thuật Thêm "Bạn cũng có thể thích" cho blogspotThủ thuật thêm Facebook Recommendations Bar cho…

  • Ảnh bìa fb hình hoa Hồng cực đẹp
    Ảnh bìa fb hình hoa Hồng cực đẹp
    14/11/2012 - 0 Comments

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