Khung Author box có nút like cho blogger ves 2

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.

Trước đây mình đã giới thiệu đến cho các bạn Author box khung ves1. Hôm nay mình 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. Điểm mới của khung Author box ves 2 này là ngoài ảnh tác giả + một vài dòng mô tả về tác giả thì mình tích hợp thêm một khung chứa các nút like và share để độc giả tiện chia sẻ bài viết của bạn nếu họ thấy có ích.

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

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

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

<div class='post-footer'>

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

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

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

<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'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpNNGc2PohxlFoVh0Iu2Qkmr7P7SQ1FSQd2hfuJc4fnPWO9ZKhhXYri2-Q5-LE5USe2veHn1Q0GxNLw6CbOYmztWPRUQHXbF_dNPEKW51sTKbN2HieXCqgRVifEPj1HkIf3nwElQZp-I/s200/Khung-Author-box-%C4%91%E1%BA%B9p-t%E1%BB%AB-CSS-cho-blogger.jpg' width='50'/></div>
<a href='http://www.blogger.com/profile/01703481174977803825' target='_blank'><b>Namkna</b></a>: 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>

• Thay link ảnh màu xanh thành thành link ảnh avantar của bạn.
• Thay http://www.blogger.com/profile/01703481174977803825 thành link liên kết tới profile blogger hoặc profile google pluss của bạn.
• Thay phần màu vàng thành mô tả vắn tắt về bạn.

» Nâng cao.

<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpNNGc2PohxlFoVh0Iu2Qkmr7P7SQ1FSQd2hfuJc4fnPWO9ZKhhXYri2-Q5-LE5USe2veHn1Q0GxNLw6CbOYmztWPRUQHXbF_dNPEKW51sTKbN2HieXCqgRVifEPj1HkIf3nwElQZp-I/s200/Khung-Author-box-%C4%91%E1%BA%B9p-t%E1%BB%AB-CSS-cho-blogger.jpg' width='50'/></div>
<a href='http://www.blogger.com/profile/01703481174977803825' target='_blank'><b>Thegioitinhoconline</b></a>: Một blogger nghiệp dư. Chuyên viết về các thuer thuật blog.

<b:if cond='data:post.author == &quot;Tên tác giả 1&quot;'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpNNGc2PohxlFoVh0Iu2Qkmr7P7SQ1FSQd2hfuJc4fnPWO9ZKhhXYri2-Q5-LE5USe2veHn1Q0GxNLw6CbOYmztWPRUQHXbF_dNPEKW51sTKbN2HieXCqgRVifEPj1HkIf3nwElQZp-I/s200/Khung-Author-box-%C4%91%E1%BA%B9p-t%E1%BB%AB-CSS-cho-blogger.jpg' width='50'/></div>
<a href='http://www.blogger.com/profile/01703481174977803825' target='_blank'><b>Namkna</b></a>: Một blogger nghiệp dư. Chuyên viết về các thuer thuật blog.
</b:if>
<b:if cond='data:post.author == &quot;Tên tác giả 2&quot;'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpNNGc2PohxlFoVh0Iu2Qkmr7P7SQ1FSQd2hfuJc4fnPWO9ZKhhXYri2-Q5-LE5USe2veHn1Q0GxNLw6CbOYmztWPRUQHXbF_dNPEKW51sTKbN2HieXCqgRVifEPj1HkIf3nwElQZp-I/s200/Khung-Author-box-%C4%91%E1%BA%B9p-t%E1%BB%AB-CSS-cho-blogger.jpg' width='50'/></div>
<a href='Link profile tác giả 1' target='_blank'><b>Tác giả 2</b></a>: Mô tả tác giả 2
</b:if>
<b:if cond='data:post.author == &quot;Tên tác giả 3&quot;'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpNNGc2PohxlFoVh0Iu2Qkmr7P7SQ1FSQd2hfuJc4fnPWO9ZKhhXYri2-Q5-LE5USe2veHn1Q0GxNLw6CbOYmztWPRUQHXbF_dNPEKW51sTKbN2HieXCqgRVifEPj1HkIf3nwElQZp-I/s200/Khung-Author-box-%C4%91%E1%BA%B9p-t%E1%BB%AB-CSS-cho-blogger.jpg' width='50'/></div>
<a href='Link profile tác giả 1' target='_blank'><b>Tác giả 3</b></a>: Mô tả tác giả 3
</b:if>