Hướng dẫn tạo Author Box cho blogspot

Author box là hộp nằm ở cuối hoặc ở trên bài viết dùng để giới thiệu về tác giả giúp người đọc hiểu thêm về thông tin tác giả.
Dạo quanh một số trang blog thấy cũng có hướng dẫn nhưng mình thấy rất dài dòng vì phải can thiệp nhiều vào template. Mình đã chắc lọc và rất vui được chia sẽ với các bạn việc tạo một author box ở cuối bài viết một cách đơn giản nhất.

Demo

Bước 1: 
Để thêm author box này vào blog trước tiên bạn truy cập vào Mẫu=>Tùy chỉnh HTML=> tìm đến đoạn code:

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

Bước 2:
Thêm toàn bộ code này ngay sau dưới đoạn code vừa tìm được sao cho khi hiển thị thấy vị trí phù hợp (miễn là đặt dưới dòng mới tìm được như trên):

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

<style type='text/css'>

<!--athaubox-->

.author-box { background: #f1f1f1; color: #000000; margin: 20px 0 30px 0; padding: 10px; overflow: auto; -webkit-border-radius: 4px; border-radius: 4px; border:1px solid #e9e9e9; box-shadow:inset 10px 0px 10px 0px #0B610B; -moz-box-shadow:inset 10px 0px 10px 0px #0B610B; -webkit-box-shadow:inset 10px 0px 10px 0px #0B610B; } 

.author-box p { margin: 0; padding: 0; } .author-box img { height: 80px; width: 80px; background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid #E6E6E6; }

</style>

<div class='author-box'> 

<p><img alt='Tên của bạn' src='Đường Link hình Avatar của bạn'/><b>About Me:</b><br/>Chào mừng bạn đến với ...(mô tả).........<br/>Follow : | <a href='https://plus.google.com/+Kieuquangtieu' rel='author' target='blank'><b>Google+</b></a> | <a href='http://facebook.com/kieuquangtieu' target='blank'><b>Facebook</b></a> | <a href='http://twitter.com/kieuquangtieu' target='blank'><b>Twitter</b></a><br/></p> </div> </b:if>

Trong đó các dòng màu blue là các bạn tùy ý thay đổi. height: 80px và width: 80px là size ảnh đại diện của bạn, các bạn cũng có thể thay đổi mã màu red theo sở thích của mình. Thế nào không quá khó phải không các chiến hữu :3

Chúc các bạn thành công với Blog của mình!

Mọi thắc mắc xin vui lòng để lại comment bên dưới!

www.kieuquangtieu.com