Tạo khung thông tin tác giả Author Box đẹp cho Blogger

Giới thiệu chút về tuts này. Author Box : là khung chứa phần thông tin tác giả của bài viết ( người đăng bài viết ).

Hôm nay mình xẽ hướng dẫn các bạn tạo Author Box giống iChiaSe.Biz.

Demo ảnh khung thông tin tác giả Author Box đẹp cho Blogger

Và đây là các bước để thêm khung thông tin tác giả Author Box đẹp cho Blogger

Đầu tiên bạn vào Blogger --> Mẫu
Nhấn Edit HTML -->Tiếp tục
Tìm kiếm ]]> </ b: skin>
Chèn đoạn CSS sau trên nó

/* iChiaSe.Biz Author Box */
.about-author {
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px;
}
.about-author img {
width:70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 0px 0px;
}
.about-author h3{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}

Để thay đổi màu sắc của văn bản "Author Box" color: # 666666;
Tiếp theo tìm đến thẻ data:post.body hoặc nơi bạn cần hiển thị Khung tác giả cho blogger
Thêm code sau vào nơi cần hiển thị :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "AUTHOR NAME"'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='IMAGE LINK OF AUTHOR'/>
<p>WRITE AUTHOR BIO HERE</p>
<p>Follow him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if></b:if>

Cuối cùng save lại là xong ! Chúc các bạn thành công, Vài ngày nữa mình xẽ nâng cấp lên bản mới . Tất cả thông tin xẽ tự cập nhật theo người đăng. hãy theo dõi iChiaSe Blog's để biết thêm chi tiết nhé

Nguồn : iChiaSe.Biz