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

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
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

2. Tìm đến thẻ </head> 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

<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>
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

/* 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)
<script>
  var bsrpg_thumbSize = 150;
  var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>
Ở đ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!

2 bình luận

  1. avatar says

    17:38 Ngày 17 tháng 04 năm 2015

    Anh kiếm từ sớm giờ sao ko thấy bài nào hướng dẫn phân trang cho blog khoảng vài ngàn bài hết, em à.

  2. avatar says

    19:42 Ngày 17 tháng 04 năm 2015

    Cái này thì em cũng không rõ về cái script phân trang nữa, chắc không giúp anh được rồi mà blog anh tới cả ngàn bài cơ á @_@

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.