Hôm nay Hồng Designer sẽ giới thiệu tới các bạn làm thế nào đẻ có thể thêm hình ảnh tác giả bên cạnh tiêu đề của mỗi bài viết của blog blogger của bạn. Thiết kế này rất tiện lợi khi blogger có nhiều hơn một tác giả trong một blog. Nó giúp bạn phân biệt giữa các tác giả của bài viết. Nó sẽ tự động lấy avata người đăng bài. Và bay giờ chúng ta tiến hành.Bước 1: Thêm CSS
Đầu tiên vào Blog Mẫu → Template → Edit HTML. Nhấn Ctrl + F. Mở rộng <b: skin> ... </ b: skin> nếu nó không được mở rộng. Gõ]]> </ b: skin> trong hộp tìm kiếm và nhấn Enter. [Theo trình biên tập HTML mới]
Thêm mã dưới đây trước thẻ ]]> </ b: skin>
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}
Bước 2: Thêm Script
Tìm đến thẻ </head> và thêm đoạn code sau trước thẻ </head><script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]></script>
Bước 3: Bước cuối cùng
Cuối cùng tìm kiếm <b:if cond='data:post.title'> => và thêm đoạn code dưới đây ngay trên nó.Lưu ý: Có thể có nhiều hơn 1 thẻ <b:if cond='data:post.title'> => bạn hãy thêm lần lượt vào các thẻ, khi nào được thì ngưng (lần lượt có nghĩa là thêm vào một trong những thẻ tìm được).
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>Sau khi thêm mã bạn tiến hành Lưu Template và kiểm tra thành quả bạn vừa làm đc. Chúc các bạn thành công!
ConversionConversion EmoticonEmoticon