[Tips] - Hướng dẫn tạo Author Box cho blogspot

Author Box là hộp mô tả nằm ở dưới hoặc trên bài viết dùng để tóm tắt nội dung bài viết hoặc có thể dùng để giới thiệu về tác giả rất chuyên nghiệp và cũng giúp cho người đọc hiểu hơn về bài viết cũng như biết rõ thông tin về tác giả hơn.

Thêm Author box vào blogspot

Bài viết này mình sẽ giới thiệu cho các bạn hai loại author box, một thích hợp tóm tắt bài viết và một thích hợp làm giới thiệu thông tin tác giả, và mình sẽ hướng dẫn các bạn đặt author box ở cuối bài viết trên blogspot.

1. Author box tóm tắt bài viết

Để thêm box này vào blog trước tiên bạn đăng nhập vào templates blogspot tìm đến đoạn code

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

Thêm toàn bộ code sau ngay bên dưới nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
<!--athaubox-->
.author-box{background:#CFCFCF;width:570px border:1px dashed #999; margin-top:20px; overflow:hidden; padding:10px; border: 5px dashed #999;}
.avatar-author{border:1px solid #888; float:left; padding:5px}
.info-author{float:right; width:570px} .info-author h2{font-size:20px}
.info-author h2 {
margin-top: 0;
font-size: 18px;
border-top: 1px dashed #0080FF;
border-bottom: 1px dashed #0080FF;
font-weight: 700;
padding: 5px;
}
</style>
<div class='author-box'>
<img class='avatar-author' expr:alt='data:blog.pageName' expr:src='data:blog.postImageThumbnailUrl' expr:title='data:blog.pageName' height='80' width='80'/>
<div class='info-author'><h2 style='color:#256EAD;'><data:blog.pageName/></h2>
<p>Bạn đang xem <b style='font-size: 14px;'><data:blog.pageName/></b> tại <b>Khám Phá Blog's. </b>
Đừng quên nhấn <span style='font-weight: bold;color: red;font-size: 18px;'>LIKE </span> và <span style='font-weight: bold;color: red;font-size: 18px;'>Chia Sẻ </span> để ủng hộ Khám Phá Blog's nếu bài viết có ích !
<br/>Hiện tại mình có nhận <b>Rip - Chỉnh Sửa - Thiết Kế Template Blogspot</b> Nếu bạn có nhu cầu và muốn cộng tác liên hệ với mình qua mail: <b>admin@khamphablog.com</b>
</p>
</div></div>
</b:if>

2. Author box giới thiệu tác giả

Tương tự như author box trên bạn thêm đoạn code sau

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
<!--athaubox-->
.author-box { background: #28282E; color: #FFFFFF; margin: 20px 0 30px 0; padding: 10px; overflow: auto; -webkit-border-radius: 4px; border-radius: 4px; border-right: #929292 solid 3px; border-bottom: #929292 solid 4px; box-shadow:inset 20px 0px 20px 0px #111; -moz-box-shadow:inset 20px 0px 20px 0px #111; -webkit-box-shadow:inset 20px 0px 20px 0px #111; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid #E6E6E6; }
</style>
<div class='author-box'> <p><img alt='YOUR NAME' height='70' src='YOUR IMAGES URL' width='70'/><b>About Me</b><br/>YOUR PROFILE DESCRIPTIONS<br/>Follow : | <a href='URL OF YOUR GOOGLE PLUS PROFILE' rel='author'><b>Google profile</b></a> | <a href='http://facebook.com/wisnu.doubleu' target='blank'><b>Facebook</b></a> | <a href='http://twitter.com/vadanium' target='blank'><b>Twitter</b></a><br/></p> </div> </b:if>

Bình thường là css nằm trong thẻ ]]></b:skin> nhưng mình giúp các bạn tối ưu luôn là css chỉ hiện ở trang bài viết chứ không hiện ở những trang khác, giúp phần nào đó tăng tốc blogspot cho các bạn. 

Bài Viết Cùng Chủ Đề

• [Tips] - Thêm nút Pin Button cho ảnh bài viết BlogspotPin Button là công cụ share ảnh lên mạng xã hội Pinterest, mọi khi các bạn phải coppy link và lên trang này mới có thể ...
• [Tips] - Làm sao để thêm share this button cho blogspotShare this button hay còn có tên gọi đơn giản hơn đó là nút like share (chia sẻ) thường hay nằm ở dưới hoặc trên cùng c ...
• [Tips] - Menu ghim cố định khi lăn chuột cho blogspot Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xu ...
• [Tips] - Vô hiệu hóa JS mặc định giúp blogspot load nhanhChào các bạn đôi khi các bạn kiểm tra tốc độ load của blogspot mình với PageSpeed Insights thì thường thấy những js (ja ...
• [Tips] - Menu responsive cho blogspotResponsive là điều chỉnh blogspot phù hợp khi xem trên thiết bị di động. Menu responsive có nghĩa là menu khi xem ...