Thêm Author Avatar bên cạnh tiêu đề bài viết trong blogger

Cũng đã có nhiều về thủ thuật thêm Author Avatar vào trong Blogger, như thêm ở cuối bài viết, thêm ở 1 góc của Blog...Còn ở bài viết này sẽ là 1 thủ thuật tuỳ biến hơn rất nhiều nếu như
Blog của bạn có nhiều hơn 1 tác giả viết bài và bạn muốn thể hiện rõ Avatar của người viết bài đó.

Dữ liệu hình ảnh này sẽ được lấy tự động, vì vậy khi bạn thay đổi Avatar từ hồ sơ Google+ thì hình ảnh ở tiện ích này cũng tự động thay đổi theo. Hiện tại thì ITViet360 mình cũng sử dụng thủ thuật này, và để chắc chắn hơn nếu sau này Lãng Tử Studio có đổi template thì bạn vẫn xem được ở link Demo trực tiếp dưới đây.

XEM DEMO

Cách thêm Author Avatar bên cạnh tiêu đề bài viết trong blogger

Bước 1: Thêm CSS
Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) -> Sử dụng phím Ctrl + F và tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Bước 2: Thêm Script
Tiếp tục bạn sử dụng Ctrl + F để tìm tới </head> và dán code dưới đây ngay trên nó
<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: Cấu hình mặc định
Cuối cùng tìm kiếm tới <b:if cond='data:post.title'> và thêm đoạn code dưới đây ngay trước nó.
Lưu ý: Có thể có nhiều hơn một kết quả tìm kiếm được, Ở template itviet360 thì có 3 kết quả nó dành cho: TRANG CHỦ, TRANG BÀI VIẾT, TRANG NHÃN nên nếu bạn muốn Avatar xuất hiện chỉ ở 1 trang thì tuỳ chỉnh nhé.
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
Vậy là đã xong. Bạn lưu mẫu lại và xem kết quả.

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích

Nguồn: itviet360