[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. 

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

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