Thông tin tác giả luôn là phần không thể thiếu đối với một blog. Bởi nó chứa những thông tin cơ bản của tác giả cũng như thông tin liên hệ. Và đó là chủ đề ngày hôm nay: Cách tạo khung thông tin tác giả dưới bài viết cho Blogspot.

Thực Hiện

CSS/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

Các bạn nhớ thay đổi các dấu # thành link mạng xã hội của bạn

Chú ý: có thể dòng  <data:post.body/> có rất nhiều nên các bạn thử từng cái, cái nào được thì thôi

Đối Với các blog các bạn tự làm từ template cơ bản của blogspot cung cấp thì các bạn có thể chèn nó trước các đoạn 

HTML<div class='post-footer-line post-footer-line-1'>

HTML<div class='post-footer-line post-footer-line-2'>

HTML<div class='post-footer-line post-footer-line-3'>

4. Lưu Mẫu lại.
5. Sau đó vào Google Plus >> Giới Thiệu >> Câu chuyện >>  Giới Thiệu rồi cập nhập thông tin của bạn là xong

Câu hỏi thường gặp

Có bạn hỏi là tại sao làm xong lại ko có dòng mô tả giới thiệu ?

Vậy làm sao để có 

Lời Kết