Bài viết mới nhất dạng hình ảnh cho Blogger - KslZone.NET

  • January 17, 2014

Theo kinh nghiệm cá nhân thì khi chúng ta bắt đầu tạo dụng một website/blog thì việc xây dụng lưu lượng truy cập khá là khó khăn. Một trong những nguồn lưu lượng phổ biến nhất thì lại thường đến từ Google. Như bạn cũng biết thì chúng ta phải cung cấp những điều mà họ cần thì họ mới đến được website qua Google được.

Nhưng vấn đề ở đây thì họ chỉ ghé qua trang đó tìm hiểu nội dung đó rồi họ bỏ đi cho dò họ tìm hoặc không tìn được thứ mình cần, chính vì thế mà các hack/mod như “Bài viết liên quan”, “Bài viết phổ biến”,… ra đời giúp tối ưu nội dung đến cho khách truy cập.

[![Bài viết mới nhất dạng hình ảnh cho Blogger](http://2.bp.blogspot.com/-OGZaHcUB0es/Utiech0JidI/AAAAAAAABXA/EAEGpNYqmq8/s1600/blogger-bai-viet-moi-nhat.png "Bài viết mới nhất dạng hình ảnh cho Blogger")](http://ksltech.blogspot.com/)
Bấm vào ảnh để xem demo

Hôm nay, bài viết này mình sẽ hướng dẫn các bạn thêm một thứ nữa “bài viết mới nhất” dạng hình ảnh cho website/blog của bạn nhằm giúp bạn cung cấp nội dung mới nhất của website/blog của bạn đến với người dùng để họ có thể ở lại lâu hơn trên website của chúng ta.

Bài viết mới nhất dạng hình ảnh cho Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

[![Bài viết mới nhất dạng hình ảnh cho Blogger](http://2.bp.blogspot.com/-3-Adg9pUq6U/Ur5fScghTKI/AAAAAAAABPE/GgH9yeMeDW0/s1600/blogger-chinh-sua-html.PNG "Bài viết mới nhất dạng hình ảnh cho Blogger")](http://2.bp.blogspot.com/-3-Adg9pUq6U/Ur5fScghTKI/AAAAAAAABPE/GgH9yeMeDW0/s1600/blogger-chinh-sua-html.PNG)

2. Tìm đến thẻ và thêm đoạn Javascript sau vào bên trên

[![Bài viết mới nhất dạng hình ảnh cho Blogger](http://1.bp.blogspot.com/-DaueOkIr6po/Utid5GczV7I/AAAAAAAABW4/g6-CEkfKXDo/s1600/blogger-the-head.png "Bài viết mới nhất dạng hình ảnh cho Blogger")](http://1.bp.blogspot.com/-DaueOkIr6po/Utid5GczV7I/AAAAAAAABW4/g6-CEkfKXDo/s1600/blogger-the-head.png)

3. Tiếp tục tìm đến thẻ ]]>/b:skin và thêm đoạn CSS sau vào bên trên

[![Bài viết mới nhất dạng hình ảnh cho Blogger](http://3.bp.blogspot.com/-RpTbThDpmi4/Ur5fbw7SOXI/AAAAAAAABPM/19OZZSMWgbQ/s1600/blogger-chinh-sua-html2.PNG "Bài viết mới nhất dạng hình ảnh cho Blogger")](http://3.bp.blogspot.com/-RpTbThDpmi4/Ur5fbw7SOXI/AAAAAAAABPM/19OZZSMWgbQ/s1600/blogger-chinh-sua-html2.PNG)
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */

4. Bạn sử dụng đoạn mã sau để chèn vào vị trí bạn muốn đặt (có thể sử dụng tại widget HTML hoặc bất cứ đâu trên trang của bạn)


Ở đoạn mã này bạn có thể tùy chỉnh các thông số sau:

  • bsrpg_thumbSize: Kích thước của ảnh (hiện tại là 150x150px)
  • bsrpg_showTitle: Ẩn hiện tên bài viết (true để hiện, false để ẩn)
  • max-results: Số lượng bài viết xuất hiện

5. Lưu lại giao diện hiện tại và tận hưởng.

Như vậy bạn đã thêm xong “Bài viết mới nhất” dạng hình ảnh cho blog của bạn. Mong ràng nó giúp bạn, và người dùng trên website của bạn tìm được những thông tin hữu ích và ở lại đó lâu hơn. Nếu có thắc mắc xin để lại nhận xét phía dưới!