Khung thông tin tác giả với nhiều tùy chọn

Bài viết này mình sẽ hướng dẫn các bạn thêm khung thông tin tác giả với nhiều tùy chọn đối với blog có nhiều tác giả. Xem demo hình ảnh bên dưới để hiểu rõ hơn

Thêm khung thông tin tác giả vào template

Bạn chèn đoạn code bên dưới vào vị trí muốn hiển thị trên blog

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio' style='display: block;'>
<div class='ts-fab-avatar'>
 <!---->&lt;img alt='<data:post.author/>' class='author-avatar' src='<b:if cond='data:post.authorPhoto.url'><data:post.authorPhoto.url/><b:else/>https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s96</b:if>' title='<data:post.author/>'/&gt;<!---->
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><span><data:post.author/></span></div>
<div class='ts-fab-content'>
   <!--Thông tin Huy co -->
  <b:if cond='data:post.author == &quot;Huy Cò Vip&quot;'> 
Hãy like hoặc chia sẻ nếu thấy bài viết hữu ích  </b:if>
   <!--Thông tin huy co end-->
   <!--Thông tin  Tác Giả 1 -->
  <b:if cond='data:post.author == &quot;Tác Giả 1&quot;'> 
Đẹp trai có gì sai?
    <br/>
    <a class='button' href='http://www.linkwebsitetacgia1.com' target='blank'>Xem website của  Tác Giả 1</a>
  </b:if>
   <!--Thông tin  Tác Giả 1-->
<div class='SocialFloat'>
<table class='trollvlSocialFloat'>
 <tr>
  <td>
   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </td>
    <td>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </td>
  <td>
   <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
  </td>
 </tr>
</table>
</div>
</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter' style='display: none;'>
<div class='ts-fab-text'>
  <!-- huyco twitter-->
<b:if cond='data:post.author == &quot;Huy Cò Vip&quot;'> 
<div class='ts-fab-header'>
<span><a href='http://twitter.com/huycovip' target='blank'>@Huy Cò Vip</a></span></div>
<div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency='true' class='twitter-follow-button twitter-follow-button' data-twttr-rendered='true' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=huycovip&amp;show_count=true&amp;show_screen_name=true&amp;size=m' style='width: 243px; height: 20px;' title='Twitter Follow Button'/>
</div>
</b:if>
  <!-- huyco twitter end-->
  <!--  Tác Giả 1 twitter-->
<b:if cond='data:post.author == &quot;Tác Giả 1&quot;'> 
<div class='ts-fab-header'>
<span><a href='http://twitter.com/ID twitter' target='blank'>@ Tác Giả 1</a></span></div>
<div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency='true' class='twitter-follow-button twitter-follow-button' data-twttr-rendered='true' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=ID twitter&amp;show_count=true&amp;show_screen_name=true&amp;size=m' style='width: 243px; height: 20px;' title='Twitter Follow Button'/>
</div>
</b:if>
  <!--  Tác Giả 1 twitter end-->
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook' style='display: none;'>
<div class='ts-fab-text'>
<!-- Facebook huyco-->
<b:if cond='data:post.author == &quot;Huy Cò Vip&quot;'> 
<div class='ts-fab-header'>
<span><a href='http://www.facebook.com/huycovip' target='blank'>Huy Cò Vip</a></span></div>
<div class='fb-follow' data-colorscheme='light' data-href='https://www.facebook.com/huycovip' data-layout='button_count' data-show-faces='true'/>
</b:if>
<!--facebook huyco end-->
<!--facebook  Tác Giả 1-->
<b:if cond='data:post.author == &quot;Tác Giả 1&quot;'> 
<div class='ts-fab-header'>
<span><a href='http://www.facebook.com/ID Facebook' target='blank'> Tác Giả 1</a></span></div>
<div class='fb-follow' data-colorscheme='light' data-href='https://www.facebook.com/ID Facebook' data-layout='button_count' data-show-faces='true'/>
</b:if>
<!--facebook  Tác Giả 1 end-->
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus' style='display: none;'>
<div class='ts-fab-text'>
<!--G+ huyco-->
<b:if cond='data:post.author == &quot;Huy Cò Vip&quot;'> 
<div class='ts-fab-header'>
<span><a href='https://plus.google.com/+HuyĐinhCông?rel=author' target='blank'>Đinh Công Huy</a></span>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/+HuyĐinhCông' data-rel='author' target='blank'/>
</b:if>
<!--G+ huyco end-->
<!--G+  Tác Giả 1-->
<b:if cond='data:post.author == &quot;Tác Giả 1&quot;'> 
<div class='ts-fab-header'>
<span><a href='https://plus.google.com/ID G+?rel=author' target='blank'> Tác Giả 1</a></span>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/ID G+' data-rel='author' target='blank'/>
</b:if>
<!--G+  Tác Giả 1 end-->
</div>
</div>
</div>
</div>
<style>
.SocialFloat{margin-top:10px}
#ts-fab-bio{background-color: #333;}
#ts-fab-twitter{background-color:#55acee;}
#ts-fab-facebook{background-color:#899ECB}
#ts-fab-facebook a,#ts-fab-twitter a,#ts-fab-googleplus a,#ts-fab-bi a{color:#fff}
#ts-fab-googleplus{background-color:#F38630}
.ts-fab-content{text-transform: none;letter-spacing: normal;font-size: 15px;}
.ts-fab-wrapper{margin:2em 0 2em;clear:both}
.ts-fab-wrapper ul{list-style:none outside none}
.ts-fab-wrapper a{text-decoration:none !important}
.ts-fab-wrapper img{border:none !important}
.ts-fab-list{overflow:hidden;padding:0 0 0 5px !important;margin:0 -5px!important}
.ts-fab-list li{display:block;float:left;list-style:none;margin:0 5px 0 0 !important}
.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#ccc;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none !important;}
.ts-fab-list li a:hover{color:#333}
.ts-fab-list li.active a{color:#fff;}
.ts-fab-list li a{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mh_L7y5L_lP0dZelCW2oKMtdC0onhlYvBjenFBvCtiGB9woxFVGcUyeGv3zDvN4upoOEHCX-1mgEOg_N4bZV7yC4MsEeK7rLgXoFR9Ym8uM6bJd0Tph79M84WGjuIbzYnMM_P9zAJp5F/s1600/fab_tab_icons.png&#39;)}
.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}
.ts-fab-list li.ts-fab-bio-link.active a{background-color:#333;background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}
.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}
.ts-fab-list li.ts-fab-twitter-link.active a{background-color:#55acee;background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}
.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}
.ts-fab-list li.ts-fab-facebook-link.active a{background-color:#899ECB;background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}
.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-list li.ts-fab-googleplus-link.active a{background-color: #F38630;background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-list li.ts-fab-linkedin-link a{background-position:8px -242px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-list li.ts-fab-linkedin-link.active a{background-position:-276px -242px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-custom-link a{background-image:none !important}
.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px !important}
.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}
.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}
.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a{width:8px}
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}
.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a{width:4px}
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0 !important}
.ts-fab-tab{display:none;padding:12px;background:#fff;min-height:64px;overflow:hidden}
.ts-fab-tab:first-child{display:block}
.ts-fab-widget .ts-fab-tab{padding:8px}
.ts-fab-avatar{display:block;float:left;width:64px;height:64px;margin-right:10px}
.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}
.ts-fab-avatar img{display:block;border:none !important}
.ts-fab-text{line-height:1.5}
.ts-fab-no-float .ts-fab-text{margin-left:0}
.ts-fab-header{margin-bottom:0px}
.ts-fab-text span{clear:none;font-size:18px;line-height:1 !important;font-weight:bold;margin:0 0 0.2em !important;line-height:1;padding:0}
.ts-fab-description{font-size:12px}
.ts-fab-follow{margin-top:10px}
.ts-fab-latest{margin:0 !important;padding:0 !important}
.ts-fab-latest li{list-style:none !important;line-height:1.1;margin:0 0 0.6em !important}
.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}
.latest-see-all{font-weight:normal}
.ts-fab-wrapper iframe{margin-bottom:0 !important}
body.rtl .ts-fab-avatar{float:right}
body.rtl .ts-fab-text{margin-left:0;margin-right:76px}
body.rtl .ts-fab-list{padding:0 5px 0 0 !important}
body.rtl .ts-fab-list li{float:right;margin:0 0 0 5px !important}
</style>
</b:if>

Tùy chỉnh:

• Ở đoạn code ở trên mình viết ra ví dụ dành cho blog có 2 tác giả tên là Huy Cò Vip và Tác Giả 1. Các bạn lưu ý thay toàn bộ các thông tin mà mình đã đánh dấu cho phù hợp với blog mình
• Nội dung trong tất cả các tab các bạn có thể viết theo ý mình và sử dụng các thẻ html
• Đoạn code được tô màu vàng là những button G+, Twitter và Like facebook, bạn có thể xóa đi nếu trong blog đã đặt những button này ở vị trí khác cho đỡ thừa

Tuy nhiên cách này cũng hơi phức tạp vào mang tính chất thủ công quá nên khá vất vả đối với blog có nhiều tác giả. Những blog có nhiều tác giả các bạn nên áp dụng theo bài viết này

Update:

• 22:52 - 06/04/2014: Tự động lấy avatar của tác giả