Tạo Khung Thông Tin Tác Giả tự động cập nhật với Social icons cho Blogger

Add Multiple Author Box with Social icons for Blogger

Ở bài viết trước Fanciest Author Box for Blogger hy vọng mình đã giúp được cho các bạn có được khung Author đẹp. Nhưng cũng có một vấn đề phát sinh đó là đối với Blog có nhiều cộng tác viên/tác giả thì làm như thế nào? Để khắc phục vấn đề đó mời bạn xem bài viết dưới đây.

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

/* CSS Multiple Author Box Iris Tips */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-family:Open Sans; 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;font-family: Open Sans;}
.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:50%;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;}

2Tiếp tục dán đoạn code bên dưới sau thẻ <data: post.body/>

<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>Author: <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>

3Bây giờ lưu template của bạn lại.

Author's Setting:

1Vào trang Google+ của bạn >> tab Giới thiệu (https://plus.google.com/u/0/USER-NAME/about) >> Câu chuyện >> Chỉnh sửa

2Chỉnh sửa thông tin của bạn lại.

3Quay trở lại Blogger. Vào Bố cục >> Widget Blog1 >> Chỉnh sửa và stick vào tùy chọn Hiển thị hồ sơ tác giả bên dưới bài đăng.

4Vậy là xong rồi đó. Từ nay bạn đã có khung thông tin tác giả tự động cập nhật thông tin từ tài khoản Google+ của bạn. Ngoài ra khi ai viết bài sẽ tự động hiển thị thông tin của người đó, không phải thêm hay chỉnh sửa thủ công nữa.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm