Khung thông tin tác giả (Author box) được sử dụng phổ biến ở rất nhiều blog, website hay diễn đàn. Đây là phần giới thiệu vắn tắt về tác giả hoặc cũng có thể để chưa một số liên kết tắt tới các mạng xã hội. Thông qua khung này các độc giả có thể hiểu sơ qua về tác giả của bài viết hoặc blog.
Khung Author box có nút like cho blogger ves 2

VIEW DEMO

Trước đây namkna đã giới thiệu đến cho các bạn Author box khung ves1.

» Những tính năng  mới của Author box ves2.

- Hôm nay namkna giới thiệucho các bạn khung thông tin tác giả sử dụng CSS để tạo các hiệu ứng bo góc riboxom nhằm tối ưu tốc độ tải trang.
- Tích hợp thêm các nút like bài viết từ các mạng xã hội như facebook, google +, Twiter,.... để độc giả tiện chia sẻ bài viết của bạn nếu họ thấy có ích
- Tự động cập nhật avantar và tên tác giả viết bài, cái này cực kỳ hữu dụng nếu một blog có nhiều cộng tác viên cùng viết bài.

» Cách tạo Author box CSS cho blog của bạn?

1- Đăng nhập vào blogger
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu:
4- Dán đoạn code bên dưới vào trước thẻ đóng </head>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s72$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
- Đây là đoạn mã dùng để cài đặt chất lượng ảnh thumbail thu nhỏ của tác giả viết bài. Muốn điều chỉnh chất lượng ảnh bạn chỉ cần thay đổi đoạn mã s72 trong đoạn mã trên.

5- Dán code bên dưới trước thẻ ]]></b:skin> :
.author{position:relative;padding:20px 0;border-top:1px solid #fff;border-bottom:1px solid #bbb}
.exlefttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:11px;left:-10px;z-index:4}
.exleftbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:113px;left:-10px;z-index:4}
.exrighttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:11px;right:-10px;z-index:4}
.exrightbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:113px;right:-10px;z-index:4}
#namkna-reb-ves2{width:540px;height:100px;margin:0;padding:0;background:#5390ad;border-top:1px solid #42718b;border-bottom:1px solid #42718b;position:relative;top:0;left:-10px;z-index:5}
.author-box{padding:22px 20px;line-height:18px;font-family:Arial;font-size:15px;color:#fff}
.author-box a{color:#fff600}
.author-box a:hover{color:#590000}
.author-avatar{height:50px;width:50px;float:left;margin:4px 10px 15px 0}
.plus{float:right;padding-right:20px;margin-top:-5px}
.author-avatar1{float:left;width:50%}
  .author-inf{padding:0px;float:left;width:48%;margin-top:-20px}
.wdt_button{float:left;margin:4px}
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:50px;height:50px}
» Trong đó:
  • Thay đổi width:540px cho phù hợp với độ rộng blog của bạn.
  • background:#5390ad; là màu nền của khung chính namkna-reb.
  • #42718b Là màu nền của tam giác riboxom bên trái. 
  • #064888 Là màu nền của tam giác riboxom bên phải. 
  • Nếu không biết về các mã màu hãy sử dụng công cụ lấy mã màu của namkna: Color conveter beautiful. 
  • margin:4px  là khoảng cách giữa các nút like hãy điều chỉnh lại nếu chúng quá sát nhau hoặc bị đẩy xuống dòng nha.
  • border-radius:50% là bo tròn avantar của tác giả viết bài nếu không muốn bo góc thì bạn có thể xóa bỏ đoạn này đi.
  • width:50px;height:50px lần lượt là chiều rộng và chiều cao của ảnh avantar.
6- Tìm một trong các đoạn code bên dưới:
Đoạn 1:
<div class='post-footer'>
Đoạn 2:
<div class='post-footer-line post-footer-line-1'>
Đoạn 3:
<div class='post-footer-line post-footer-line-2'>
Đoạn 4:
<div class='post-footer-line post-footer-line-3'>

- Thêm vào ngay sau một trong các đoạn code trên đoạn code bên dưới: 
<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both;'/>
<div class='author'>
<div class='exlefttop'/><div class='exleftbottom'/><div class='exrighttop'/><div class='exrightbottom'/>
<div id='namkna-reb-ves2'>
<div class='author-box'>
<div class='author-avatar1'>
<div class='author-avatar'><script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/></div>                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>: Một blogger nghiệp dư. Chuyên viết về các thuer thuật blog 
</div></div>
<div class='author-inf'>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'></a></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'></a></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'></a></div>

<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END --> 
</div>
</div>
</div>
</b:if>
» Tùy chỉnh:
  • Thay phần màu vàng thành mô tả vắn tắt về bạn.

7- Lưu mẫu  lại là oke.