Tạo Author box tự động cập nhật thông tin từ tác giả Blogger

Trước đây mình cũng đã giới thiệu với các bạn thủ thuật Tạo khung thông tin tác giả Author Box đẹp cho Blogger. Nhưng nó thực sự chưa tốt và đáp ứng được nhu cầu của những Blogger có nhiều tác giả. Vì nó chưa tự cập nhật tên cũng như ảnh của tác giả bài viết. Và để tiếp tục với thủ thuật tạo Author Box cho Blogger hôm nay mình xẽ hướng dẫn các bạn tạo khung Author Box tự động cập nhật ảnh đại diện và tên cho Blog

Ảnh minh họa

Tạo Author box tự động cập nhật thông tin từ tác giả Blogger

Các bước chèn CSS và code vào template :

Bước 1: Đăng nhập vào blogger.com

Bước 2: Tiếp tục các bạn chọn mẫu >> chỉnh sửa HTML >> Ctrl+F tìm đến thẻ ]]></b:skin> và đoạn CSS3 bên dưới trước nó

CSS3 author box cho blogspot

/*Author box*/
.author-profile {
line-height: 1.7em;
font-size: 13px;
margin: 6px 0 0;
padding: 0 5px;
background: #000;
border: 2px solid #13BCC4;
color: #fff;
overflow: hidden;
}
.author-profile img {
border: 3px solid #00FA46;;
float: left;
margin-right: 5px;
border-radius: 50px;
width: 80px;
box-shadow: 1px 1px 3px 0 #fff;
padding: 3px;
}

Sau khi chèn CSS xong để hiển thị Author box cho blogspot các bạn tìm đoạn <div class='post-footer'> thứ 2 nếu không có thì tìm đoạn <b:includable id='post' var='post'>...</b:includable> nếu có đoạn <div class='post-footer'> thì code bên dưới dưới nó hoặc có thể chèn trong đoạn này <b:includable id='post' var='post'>...</b:includable> tùy theo mỗi template mà bạn đang sử dụng

Code Author box cho blogspot chuẩn HTML5

<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='Tác giả' expr:src='data:post.authorPhoto.url' itemprop='image'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<b><span itemprop='name'><data:post.author/></span></b>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>

Bước 4 Các bạn lưu lại và xem kết quả

Lưu ý: Các bạn chỉnh sửa thông tin và ảnh đại diện của mình bên google plus để được cập nhật nhé vi dụ như của mình .