Hiện nay mình thấy có rất nhiều bài viết hướng dẫn về cách tạo box tác giả cho blogspot, tuy nhiên hầu hết những thủ thuật đó phải làm thủ công bằng cách thêm ID của từng tác giả vào, hơn nữa cũng không thống kê tác giả đó đã viết được bao nhiêu bài trên blog, như vậy thật là bất tiện. Và giải pháp cho chúng ta đó chính là Customizable Author Box with post count của blog yabtb. Thật tuyệt với, bạn chỉ việc cài đặt một lần cho template của mình, tất cả công việc lấy tên và link profile của tác giả, thống kê số lượng bài viết đều hoàn toàn tự động


Customizable Author Box with post count

Live Demo

Tuy nhiên bài viết tác giả hướng dẫn chỉ là cơ bản, vì thế họ không đi sâu vào phần thiết kế giao diện cho tiện ích, do đó mình đã thêm màu mè và các button like, folow cho "phong phú" hơn. Và bạn cũng có thể tham khảo bài viết gốc của tác giả tại đây

Cài đặt jQuery

Nếu template của bạn chưa cài đặt jQuery thì dán đoạn code sau đây trước thẻ đóng </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Cài đặt Javascrip

- Tìm thẻ <data:post.jumpText/> trong template, sau đó bạn nhìn xuống dưới thẻ này vài dòng sẽ thấy đoạn code sau <div class='post-footer'> hoặc tương tự, ví dụ như <footer class='post-footer'> . Lúc này hãy thêm đoạn code bên dưới vào trước đoạn <div class='post-footer'> đó
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Author box after post, with post count, for Blogger by MS-potilas 2012.
// see http://yabtb.blogspot.fi/2012/06/customizable-author-box-with-post-count.html
//
var aut_desc = {};
var auth_url = {};
 
// CONFIGURATION
 
var multiAuthor = true;        // for multi author blogs set this to true
var onePost = "post";
var manyPosts = "posts";
 
// you _should_ give description for each author, can use html with formatting, contact links, etc.:
  
aut_desc['some other'] = 'Description of this other person.';
 
 
// you _can_ override author links, but it is not necessary:
 
auth_url['MS-potilas'] = '';
 
auth_url['some other'] = '';
 
 
// Configure CSS:
//]]>
</script>

<!-- Customize this div, which contains the author box: -->
<div class='post-author-block'>
  <h2>Tác Giả <a class='authorinfolink'><span class='authorinfoname'/></a></h2>
  <a class='authorinfolink'><img border='0' class='authorinfoimage' src=''/></a>
  <div><span class='authorinfoname'/> đã viết <span class='authorinfopostcount'>0</span> bài trên <a href='http://www.trollvl.com/'>Troll Vl</a>.</div>
  <div><span class='authorinfodescription'/></div>
<!-- AddThis Button BEGIN -->
<div class='share'> <h3>Bạn thích bài viết này?</h3>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e93575e5ea773e9' type='text/javascript'/>
    </div>
<!-- AddThis Button END -->
  <div style='clear:both;'/>
</div>
<script type='text/javascript'>
//<![CDATA[
var authors = {};
var ndxbase = 1;
var auname = "";
function getAuthorInfo(json) {
  var authorName = "";
  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    authorName = entry.author[0].name.$t;
    if(authors[authorName])
      authors[authorName].count++;
    else {
      var aut = new Object();
      aut.author = entry.author[0];
      aut.count = 1;
      authors[authorName] = aut;
    }
    if(!multiAuthor) break;
  }
  if(multiAuthor && json.feed.entry.length == 500) {
    ndxbase += 500;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&start-index='+ndxbase+'&alt=json-in-script&callback=getAuthorInfo"></'+'script>');
    return;
  }
  if(!multiAuthor)
    authors[authorName].count = json.feed.openSearch$totalResults.$t;
  au = auname;
  if(authors[au]) {
    if(aut_desc[au] && aut_desc[au] != "")
      $(".authorinfodescription").html(aut_desc[au]);
    $(".authorinfopostpost").text(parseInt(authors[au].count) == 1 ? onePost : manyPosts);
    $(".authorinfopostcount").text(authors[au].count);
    if(authors[au].author.gd$image)
      $(".authorinfoimage").attr("src", authors[au].author.gd$image.src);
    $(".authorinfoimage").attr("title", au);
    $(".authorinfolink").attr("title", au);
    $(".authorinfoname").text(au);
    if(authors[au].author.uri && authors[au].author.uri.$t != "")
      $(".authorinfolink").attr("href", authors[au].author.uri.$t);
    if(auth_url[au] && auth_url[au] != "")
      $(".authorinfolink").attr("href", auth_url[au]);
    $(".post-author-block").show();
  }
}
//]]>
auname = &quot;<data:post.author/>&quot;;
//<![CDATA[
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=getAuthorInfo"></'+'script>');
//]]>
</script>
</b:if>
- Bạn hãy thay đổi nội dung được đánh dấu cho phù hợp với blog của mình

Cài đặt CSS

- Dán đoạn CSS bên dưới trước thẻ ]]></b:skin>
.post-author-block{display:none;color:#fff;margin:0 0 10px;padding:5px 10px;background-color:#333;border:1px dotted #bbb;line-height:1.6;font-size:90%;text-shadow:0 0 1px black;font:normal normal 10px 'Open Sans Condensed',sans-serif;font-weight:bold}
.post-author-block a{color:#fff000}
.authorinfoname{font-weight:bold}
.authorinfoimage{float:left;width:32px;height:32px;padding:10px;-moz-box-shadow:inset 0 0 10px #666;-webkit-box-shadow:inset 0 0 10px #666;box-shadow:inset 0 0 10px #666;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;vertical-align:middle;margin:0 10px 0 0}
.post-author-block:hover .authorinfoimage{moz-box-shadow:inset 0 0 10px #999;-webkit-box-shadow:inset 0 0 10px #999;box-shadow:inset 0 0 10px #999}
.post-author-block h2{color:#fff;text-transform:uppercase;text-shadow:0 0 1px black;font:normal normal 15px 'Open Sans Condensed',sans-serif;font-weight:bold}
.post-author-block h3{color:#fff;background-color:transparent;border-top:0;border-bottom:0}
.post-author-block .share{margin-left:55px}
Nguồn yabtb
Style by TrollVL.Com