15/3/13

Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

Đăng bởi Admin | 15/3/13 | 0 nhận xét

 Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

Tiện ích bài đăng phổ biến (popular post) để hiển thị các bài viết được xem nhiều nhất cùng với một hình ảnh thu nhỏ dựa trên các số liệu thống kê Analytics của bạn. Nhưng giao diện còn khá đơn giản và thô sơ, mình sẽ ghi đè lên các stylesheet của tiện ích này hoàn toàn với phông chữ tùy chỉnh và màu sắc của mybloggertrick. Bạn có thể xem tiện ích phổ biến ngay trên blog demo của  hoặc hình ảnh minh họa bên cạnh để thấy rõ hơn.. 


XEM DEMO

Ưu điểm lớn nhất của tiện ích này là chúng ta không cần phải cài đặt bất kỳ Javascripts bởi vì tôi sử dụng một tiện ích được lưu trữ trên các máy chủ của Blogger và tôi sẽ chỉ làm thay đổi hình dáng của nó để làm cho nó hoàn hảo với các blog blogspot của bạn. 

Tôi hy vọng bạn sẽ thấy thú vị

☼ 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:
Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
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 để cài đặt các thông số như hình dưới (nếu bạn dùng blog tiếng anh thì xem hình này).
Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

☼ 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> :
/*--- http://namkna.blogspot.com/ Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMGl4BuybuyUThgiDgwH8sYtE18yXfU0YAEMwkVUQdlJmd7H207xsOeLsWD-eXfMYFg1XL4TafOx_GLERH3KqfyNtFpSnxH_JKyjBmKW1D8Fyd-u2-cRvurQcrsDxTjz84nlwLIPW7ac/h120/green-star-namkna-blogspot-com.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}

.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

☼ Bước 3: Tùy chỉnh!

 - Thay thế icon đầu mỗi bài viết bạn thay đổi link anh màu xanh. Bạn có thể tìm kiếm một số icon động ngộ nghĩnh  Tại đây.
- Để thay đổi đường viền quanh mỗi bài viết khi chưa dê chuột vào tiêu đề đó  thay đổi phầnmàu hồng.
- Để thay đổi đường viền quanh mỗi bài viết khi dê chuột vào tiêu đề đó thay đổi phần màu vàng/
- Bạn có thể chọn mã màu mình thích thông qua công cụ lấy mã màu  Tại đây.
- Cuối cùng lưu mẫu lại và xem kết quả nha.

Cập nhật!
Mình cung cấp thêm cho các bạn một style mới để các bạn lựa chọn:
Ảnh minh họa:
Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
/*--- http://namkna.blogspot.com/ Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtYHDeIvkVhV70to2ngBNaY-9jw-AmB2KPy-sFUnfwphErvoAVkVTuUGjSXtSjHrc-9ELi59Ng0J2b9IQu0VRC04IIT8RXMZsOzDDC1xwhooT6ovxreVA-MWquY-G1zXxlIHvhIzxCHJc2/s1600/icon-popularpost-namkna-blogspot-com.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid rgb(221, 221, 221);
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
( Theo Namkna)
                                                                                                             Thu thuat vi tinh

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

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva