Thêm avantar tác giả bên trước tiêu đề blogspot

Thủ thuật này sẽ thêm hình ảnh avantar đại diện của tác giả viết bài đó vào trước tiêu đề bài viết đang xem, qua đó giúp độc giả có thể nhận biết được ai là người viết bài đó đối với những blog có nhiều cộng tác viên. Điểm đặc biệt của thủ thuật này là các avantar sẽ được hiển thị hoàn toàn tự động bạn không phải cập nhật mối khi có sự thay đổi về tác giả cũng như cộng tác viên trong blog của bạn

Bạn có thể xem ảnh minh họa bên dưới để thấy rõ hơn tiện ích này hoạt động thế nào nha:

Các bạn có thể xem demo theo link bên dưới:

» XEM DEMO

» Cách để Hiển thị avatar người viết bài bên cạnh tiêu đề bài viết

1- Đăng nhập vào blog
2- Chọn mẫu => bấm vào button Chỉnh sửa HTML
3- Tìm thẻ tiêu đề bài viết, Trong blogger thì nó nằm trong thẻ <b:if cond='data:post.title'>. Sau khi tìm được thẻ đó thì hãy thêm vào trước đoạn code đó đoạn mã bên dưới:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

Lưu ý:  Mỗi blog có 2 đoạn <b:if cond='data:post.title'> nên bạn phải chèn đúng đoạn cần thiết nó mới hiển thị.

4- Tiếp theo bạn dán đoạn code bên dưới vào 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>

- Trong đoạn mã trên, bạn sẽ thấy đoạn mã quy định độ phân giải của ảnh là s30. Nếu ảnh quá mờ bạn có thể chỉnh lại phần đó nha.

5- Tiếp theo chèn đoạn mã CSS quy định kích thước và vị trí của hình ảnh hiển thị vào trước thẻ ]]></b:skin>.

.avatar-author{margin-right:5px;border:1px;padding:0px;width:30px;height:30px;float:left}

Trong đó:

• width:30px là chiều rộng của avantar
• height:30px là chiều cao của avantar

- Với đoạn css trên thì vantar sẽ có hình vuông như hình dưới:

- Nếu muốn avantar có hình tròn thì bạn thay đoạn css trên thành đoạn sau:

.avatar-author{border:0;border-radius:50%;padding:0;width:30px;height:30px;float:left;margin-right:10px}

6- Giờ lưu mẫu lại và kiểm tra kết quả thực hiện của bạn nha.