Widget Recent Posts - Thêm Bài viết mới cho Blogspot

Với nhiều mẫu thiết kế Blogger thì việc viết Blog theo dạng Blog cá nhân nên để hiển thị bài viết mới ngay ở trang chủ để tiện việc theo dõi của bạn đọc (Ví dụ Blog Vũ Văn Phong này). Tuy nhiên hiện này nhiều Blogger được thiết kế theo những mục đích khác nhau như giới thiệu công ty, giới thiệu dịch vụ...(Ví dụ như Blog Dịch vụ SEO) thì việc thiết kế để show được dịch vụ của mình ra là điều cần thiết. Thiết kế đó đã sử dụng ẩn những bài viết mới mặc định của Blogger. Vậy bạn có muốn những bài viết mới đó được hiển thị ở 1 vị trí nào đó. Recent Post Widget dưới đây sẽ giúp bạn làm được điều đó. Ngoài việc làm thủ thuật tạo Widget Recent Post này mình cũng hướng dẫn thêm những tùy chỉnh để bạn dễ dàng thể hiện lên Blog của mình.

Widget Recent Posts - Thêm  Bài viết mới cho Blogspot

DEMO trực tiếp tại Site Blog: Làm đẹp khỏe

Hướng dẫn thủ thuật Widget Recent Posts - Thêm Bài viết mới cho Blogspot

Có 3 tùy chỉnh đối với Widget Recent Posts này. Các bạn đều thực hiện thao tác chung là
Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML / Javascript.
Bước 2: Dán code dưới (1 trong 3) vào tiện ích vừa thêm

1. Widget Recent Posts chỉ hiển thị tiêu đề bài viết và mô tả ngắn

(Xem ở ảnh trên, loại bỏ của bài đăng)

<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
 <script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

2. Widget Recent Posts chỉ hiển thị tiêu đề bài viết

(Xem ở ảnh trên, loại bỏ hình ảnh đại diện bài viết và mô tả ngắn)

<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
<script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
 <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

3. Widget Recent Posts chỉ hiển thị tiêu đề bài viết và mô tả ngắn

(Như hình Demo)
<!-- Huong dan boi vuvanphong.com -->

<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
 <script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 60;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Trong đó có các tùy chọn được bôi đỏ bạn cần quan tâm:
- var numposts = 3; : số bài viết mới được hiển thị ra
- var showpostthumbnails = true; : Tùy chọn hiển thị hình ảnh đại diện của bài viết ra. Giá trị TRUE là có hiển thị, FALSE là không hiển thị.
- var numchars = 60; : Số ký tự mô tả ngắn của bài viết mới đó
Tương tự những các giá trị khác như showdate (hiển thị ngày tháng), showcommetnum (Số bình luận)...
!
Chúc các bạn vui vẻ !