Blog
Android
iOS
WP OS
- Lúc: 07:39
Widget bài viết mới là một tiện ích mở rộng được sử dụng khá phổ biến trong blogger. Vừa tốt cho SEO, vừa chủ động tăng view cho bài viết.
 |
| Code widget bài viết mới (recent posts) cho blogspot |
Yêu cầu cơ bản
- Hiểu rõ về code.
- Sao lưu template trước khi thao tác, phòng trường hợp lỗi.
- Trong quá trình chèn code, nếu hệ thống báo lỗi, hãy sử dụng bảng convert mã html sang htmlx để chèn thành công nhé.
Cách chèn code vào trong blogspot
- Đăng nhập blogger.
- Bên menu trái, chọn Mẫu / Chỉnh sửa HTML
- Copy - paste code vào vị trí cần đặt.
Thông thường, wiget bài viết mới sẽ không có sẵn trong code blogger (vì nó là tiện ích mở rộng). Do đó, chúng ta sẽ phải tìm kiếm trên mạng và thay đổi code cho phù hợp với giao diện blogspot.
Những đoạn code dưới đây được mình sưu tầm và có chỉnh sửa đôi chút để dễ hiểu hơn. Code ngắn gọn, widget hoạt động tốt, bù lại CSS hơi sơ sài, nếu bạn thích giao diện bắt mắt hơn, hãy bổ sung thêm CSS và nhớ là bạn phải nắm vững về CSS nhé :)
1. Code widget bài viết mới cơ bản (không có hình ảnh)
Xem demo
<style type='text/css'>
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #333; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;}
.bbrecpost2 a:hover {color:darkviolet;}
.bbrecpost2 span {font-size:12px;}
</style>
<div style='border:1px solid #d1d1d1; box-sizing:border-box;'>
<script src='https://googledrive.com/host/0B4v2llDGaFQyLWpiYnNVVU9EaVU/' style='text/javascript'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src='http://123itvn.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</div>
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #333; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;}
.bbrecpost2 a:hover {color:darkviolet;}
.bbrecpost2 span {font-size:12px;}
</style>
<div style='border:1px solid #d1d1d1; box-sizing:border-box;'>
<script src='https://googledrive.com/host/0B4v2llDGaFQyLWpiYnNVVU9EaVU/' style='text/javascript'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src='http://123itvn.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</div>
Trong đó, các thuộc tính :
- numposts : số lượng bài viết được hiển thị.
- showpostdate : hiển thị ngày đăng (true - có, false - không).
- showpostsummary : hiển thị mô tả ngắn (true - có, false - không).
- numchars : số ký tự của đoạn mô tả ngắn.
- standardstyling : kiểu hiển thị của đoạn mô tả ngắn (true - viết liền, false - xuống dòng).
- Thay 123itvn.com bằng đường dẫn site của bạn.
- numposts : số lượng bài viết được hiển thị.
- showpostdate : hiển thị ngày đăng (true - có, false - không).
- showpostsummary : hiển thị mô tả ngắn (true - có, false - không).
- numchars : số ký tự của đoạn mô tả ngắn.
- standardstyling : kiểu hiển thị của đoạn mô tả ngắn (true - viết liền, false - xuống dòng).
- Thay 123itvn.com bằng đường dẫn site của bạn.
2. Code widget bài viết mới có hình ảnh và snippet
Xem demo
<div>
<style type="text/css">
img.recent_thumb {padding:1px;width:60px;height:60px;border:0;float:left;margin-right:10px;border:1px solid #d1d1d1;}
.recent_posts_with_thumbs {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; list-style-type:none; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
ul.recent_posts_with_thumbs li:last-child {border:none;}
.recent_posts_with_thumbs hr {display:none;}
.recent_posts_with_thumbs a {text-decoration:none; font-weight:bold;}
.recent_posts_with_thumbs i {font-style:normal; font-size:12px; }
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="https://sites.google.com/site/kenhtai2/code-bai-viet-moi.js"></script>
<script>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://123itvn.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
<style type="text/css">
img.recent_thumb {padding:1px;width:60px;height:60px;border:0;float:left;margin-right:10px;border:1px solid #d1d1d1;}
.recent_posts_with_thumbs {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; list-style-type:none; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
ul.recent_posts_with_thumbs li:last-child {border:none;}
.recent_posts_with_thumbs hr {display:none;}
.recent_posts_with_thumbs a {text-decoration:none; font-weight:bold;}
.recent_posts_with_thumbs i {font-style:normal; font-size:12px; }
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="https://sites.google.com/site/kenhtai2/code-bai-viet-moi.js"></script>
<script>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://123itvn.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
Code sưu tầm từ ikhampha.com
Trong đó, các thuộc tính
- showpostthumbnails : hiển thị hình ảnh (true - có, false - không).
- displaymore : hiển thị nút more.
- showcommentnum : hiển thị số lượng bình luận bằng Google+
- numposts, showpostdate, showpostsummary, numchars : giống thằng trên
- Thay 123itvn.com bằng đường dẫn site của bạn.
0 nhận xét