[Blogger Tips] Hướng dẫn tạo widget bài mới đăng đơn giản và đẹp cho blogspot

Để tạo được widget bài mới đăng đơn giản và đẹp như trong hình các bạn có thể làm theo những bước đơn giản sau đây:

Bước 1: Vào bảng điều khiển của blogger và chon layout ( Bố cục)

Bước 2: Chọn thêm tiện ích ( Add widget) tại vị trí bạn muốn widger bài mới đăng hiện trên trang của bạn.

Bước 3: Trong cửa sổ hiện ra bạn chon loại widger HTMl/ Javascript

Bước 4 Copy và dán đoạn code sau vào phần nội dung:

<style type='text/css'>
    img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
    float:left;margin:0px;}
    .recent_posts_with_thumbs {float: left;width: 350px;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
    .recent_posts_with_thumbs a {text-decoration:none;}
    .recent_posts_with_thumbs strong {font-size:12px;}</style>
    <script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
    <script style='text/javascript'>
    var numposts = 5;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = false;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;</script>
    <script src='http://www.rinviet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

 Trong đoạn code trên các bạn tùy chỉnh như sau:

    var numposts = 5; ------------------ 5 là số bài viết hiện trên widget.
    var showpostthumbnails = true; --- Hiện ảnh thu nhỏ bài viết: True là có, False là không.
    var displaymore = false; ------------ Hiện nút Readmore (Đọc thêm): True là có, False là không.
    var displayseparator = false; ------- Hiện dấu ngắt giữa từng bài: True là có, False là không.
    var showcommentnum = false; --- Hiện số comment (nhận xét): True là có, False là không.
    var showpostdate = false; --------- Hiện ngày tháng bài viết xuất bản: True là có, False là không.
    var showpostsummary = true; ---- Hiện đoạn bài viết rút gọn: True là có, False là không hiện.
    var numchars = 100; --------------- Số ký tự của đoạn thu gọn.

http://www.rinviet.com  ---- Thay đoạn code này bằng địa chỉ trang blog của các bạn. Sau khi thay xong các bạn kiểm tra bằng cách gõ vào thanh địa chỉ: http://địa chỉ blog của bạn/feeds/posts/default?orderby=published, nếu ra trang feeds thì bạn đã làm chính xác.

Bước 5, Lưu lại và xem thành quả.

Chúc các bạn thành công.

Category: Blogger tips, Blogger Widget, New