[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] - Cách lấy data blogspot người khácLấy data blogspot hay còn gọi là rip data blogspot người khác có nghĩa là cách lấy một số hay toàn bộ bài viết của một ...
• Vì sao blogspot không nhận thumbnail khi share linkThumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay mộ ...
• Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website  từ A tới Z cho website và blogspot: Bao gồm những kỹ thuật tối ưu ...
• [Tips] - Sticky menu kèm hộp tìm kiếm cho blogspotNói đến stick menu là chúng ta nói đến một menu ghim cố định trên top blog, nó giúp tiện lợi hơn khi chúng ta lăn thanh ...
• Làm sao để xóa bản quyền Blogger cho blogspot Bản quyền Blogger là phần "Cung cấp bởi Blogger" thông thường nằm dưới chân trang hoặc ở sitebar của blogspo ...