Tự động thêm thẻ Alt và Title cho hình ảnh bằng tiêu đề bài viết Blogspot

Trước đây, mình đã giới thiệu bài viết Thêm thẻ Alt và Title cho hình ảnh trong Blogspot , tuy nhiên hạn chế của phương pháp này là tên của hình ảnh sẽ được sử dụng để làm nội dung thẻ Alt và Title, vì vậy ta phải đổi tên cho từng hình ảnh một, khá mất thời gian nếu bài viết có nhiều hình ảnh.

Hôm nay mình sẽ giới thiệu cách tự động thêm thẻ Alt và Title cho hình ảnh, sử dụng chính tiêu đề bài viết để tạo nội dung cho các thẻ này, điều này rất tiện lợi, ta không cần phải tạo thủ công thẻ Alt, Title hay phải đổi tên cho ảnh khi viết bài.

DEMO

Cách làm:

1. Đăng nhập vào Blogger.com
2. Chọn Template > Edit HTML
3. Đảm bảo là trong Template của bạn đã có thư viện Jquery, nếu chưa có, xem Hướng dẫn thêm thư viện Jquery vào Blogspot
4. Thêm đoạn Code sau lên trên thẻ </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="imgus" style="display:none;"><data:blog.pageName/></div>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function(){$(".post-body img").each(function(){var t=$(this),e=document.getElementById("imgus").innerHTML;t.attr("title",e),t.attr("alt",e)})});
 //]]>
 </script>
</b:if>

5. Lưu Template lại và truy cập vào bài viết để xem kết quả