Hướng dẫn tạo multiple Author Bio Widget vào blogger

Rất nhiều người đọc hỏi rằng : làm sao để add thêm author box trong blogger khi mà có nhiều tác giả viết bài ? Nên tôi xin giới thiệu với các bạn widget này sẽ giúp người dùng có nhiều sự lựa chọn hơn trong việc sử dụng author box.

Nếu bạn có nhiều tác giả (author) trong một blog, bạn muốn họ được hiển thị lên để tôn vinh họ như một tác giả chính thức thì hãy làm theo cách sau đây :

Thêm đoạn CSS vào Author Bio Widget :

1. Vào Design(Template)  > Edit HTML
2. Search dòng : ]]></b:skin>
3. Thêm đoạn css sau vào trên code đó
4. Click xem code

   .btnt-about-author-containter{  background: #eee; border-bottom: 1px solid #ddd; color: #111 !important; border-radius: 10px 10px 10px 10px; margin-bottom: 24px; padding: 16px; font-family: Georgia,”Times New Roman”,Times,serif; font-size: 18px; font-style: italic; line-height: 26px; text-align: center;  display: inline-block;  }
   .btnt-about-author-containter p{  margin:0;  padding:0; margin: 0 0 10px;  }
   .btnt-about-author-containter .btnt-heading {  margin:0;  padding:0;  font-size:23px; }
   .btnt-about-author-pic{  background: #eee;  border: 1px solid #e7e7e7;  float: left;  height: 100px;  width: 100px;  padding: 4px;  margin-right: 5px;  }
   .btnt-about-author-pic img{  width: 100px;  padding: 0;  }
   
5. Save lại .

Tiếp tục , bạn cần search ctrl + F dòng sau :

<div class='post-footer-line post-footer-line-1'/>.

Sau đó,copy đoạn code dưới vào trước dòng code trên :

Click xem code

<!–BLOG ADMINISTRATOR WIDGET STARTS–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:post.author == &quot;ADMIN&quot;’>
<div class=’btnt-about-author-containter’><div class=’btnt-about-author-pic’><img alt=” class=’avataravatar-100 photo’ height=’100′ src=’http://i1203.photobucket.com/albums/bb382/chandeep10/blogger-logo.png’ width=’100’/></div><div class=’btnt-about-author-text’><div class=’btnt-heading’>About the Author</div>
<p>ADMIN-AUTHOR-BIO You can follow him on <a href=’YOUR-TWITTER-URL‘>Twitter</a>, <a href=’YOUR-FACEBOOK-URL‘>Facebook</a> or <a href=’YOUR-GOOGLE-PLUS-URL?rel=author’>Google+</a></p>
<div style=’text-align: right; line-height: 0;’>
<a href=’http://www.blogtipsntricks.com/’ style=’text-decoration: none; color: #BBBBBB; font-size: 50%;’>[Get this widget]</a></div></div></div>
</b:if></b:if>
<!–BLOG ADMINISTRATOR WIDGET ENDS–>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<b:if cond=’data:post.author == &quot;GUEST-AUTHOR-NAME&quot;’>
<div class=’btnt-about-author-containter’><div class=’btnt-about-author-pic’><img alt=” class=’avatar avatar-100 photo’ height=’100′ src=’http://i1203.photobucket.com/albums/bb382/chandeep10/guest-author-img.gif’ width=’100’/></div><div class=’btnt-about-author-text’><div class=’btnt-heading’>About the Author</div>
<p>GUEST-AUTHOR-BIO</p>
<div style=’text-align: right; line-height: 0;’>
<a href=’http://www.blogtipsntricks.com/’ style=’text-decoration: none; color: #BBBBBB; font-size: 50%;’>[Get this widget]</a></div></div></div>
</b:if></b:if>
<!–GUEST BLOGGER WIDGET ENDS–>

Save lại và thưởng thức thôi !

Ghi chú :

ADMIN – Thay tên bạn vào.

GUEST-AUTHOR-NAME – Thay tên tác giả khách vào.

ADMIN-AUTHOR-BIO – Thay dòng Bio tác giả vào.

GUEST-AUTHOR-BIO – Thay dòng Bio tác giả vào.

Nguồn Thuthuatblogspot.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..