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


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

<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

/* 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!