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

Ả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: Vào Bố cục >> Bài đăng trên blog >> Chỉnh sửa cụ thể như hình bên dưới

Bước 3: 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 .