Thêm Photo/Image Gallery cho Blogger

Đây là tiện ích mà hầu hết các Blogger, đặc biệt là các bạn mới tập tễnh làm quen đều muốn tìm. Thậm chí tìm hoài không ra. Nó đơn giản, dễ thêm, dễ điều chỉnh và sử dụng được cả cho việc thêm tiện ích ở trang chủ, lại cả các trang tĩnh. Bắt đầu thôi!

XEM DEMO.

Bước 1: Tìm thẻ </head> và thêm trước nó đoạn code sau:

<script> // Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
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 :
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC3IhZhL_br9NQzVLj8XEAtaAKBvTCi6jbo1eQzHnxfnA6mYxGvYzbtXXB6DxNKzkPySlajtbOOrj6cem1encdAFbVaEEeKKgaAzfsmXwsoO7LkBHQqK5bz8sDli-NIDlwqRDdrQwukto/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>

Bước 2: Tìm thẻ </b:skin> , thêm trước nó đoạn code

/*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;}
/*Recent Posts Image Gallery CSS End */

*Lưu lại.

Bước 3: Trở lại Layout/Bố cục > Add a Gadget/Thêm tiện ích > Thêm đoạn code bên dưới

<script>
 var bsrpg_thumbSize = 150;
 var bsrpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary/-/your label?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Bước 4: Chỉnh sửa/Customization

1. Sửa 150 thành số tùy thích để điều chỉnh hình ảnh hiển thị.
2. Nếu không thích hiển thị Tiêu đề bài đăng thì sửa true thành false
3. Thay your label bằng tên nhãn bạn muốn hiển thị.
4. Thay max-results=8 bằng số bài muốn hiển thị.
5. Còn nếu không thích hiển thị theo nhãn mà hiển thị theo bài đăng mới nhất thì dùng code này:

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

Bonus

Bạn có thể thêm tiện ích ở các trang tĩnh bằng cách thêm code ở bước 3. Nhớ là chuyển sang chế độ HTML trước khi paste code nhé!

Với tiện ích này, khó mà không thành công được nên mình không chúc thành công ha he..he...he...