Custom Blogger Author Box

Cách đây khá lâu thì Blogger đã thêm một thành phần mới vào blog là khung hiện thị thông tin tác giả bài viết mà người ta hay gọi là author box. Ưu điểm của khung auhor này là có thể tự động cập nhật thông tin tác giả bao gồm ảnh đại diện và đoạn tự giới thiệu, tất nhiên nếu blog của bạn có nhiều cộng tác viên thì mỗi người sẽ có một cái author riêng, có ảnh đại diện riêng và đoạn giới thiệu riêng. Một điều đáng quan tâm nữa là vì nó có sẵn nên ta chỉ việc bật nó lên chứ không cần thêm code gì vào. Tuy nhiên là cái author này nhìn hơi xấu, nhưng không sao, bài hôm nay của mình sẽ giúp các bạn bật và tùy biến lại cái author này với một chút CSS để trông nó đẹp hơn.

DEMO

#Bật author box

Việc bật author box, chỉnh đoạn giới thiệu và lỗi không bật được author box đã được mình viết đầy đủ tại bài Bật author box mặc định của Blogger , các bạn truy cập vào để xem hướng dẫn.

Author box khi chưa tùy biến

#Tùy biến style 1

Tùy biến style 1

Style 1 này được tùy biến khá đơn giản: ảnh đại diện sẽ được thay đổi kích thướng, thêm màu nền và đường viền cho author box.
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trước thẻ mà bạn vừa tìm

.author-profile {
  background: #434E52;
  border: #fff solid 1px;
  padding: 2px;
  Font-family: arial;
}
.author-profile {
  margin: 5px 5px 0 0;
  overflow: hidden;
}
.author-profile a.g-profile {
  font-weight: bold;
  font-size: 200%;
  color: #fff;
  padding: 5px 0 2px 0;
  text-decoration: none;
  line-height: 20px;
  display: inline-block;
}

5. Để thay đổi kích thước ảnh đại diện bạn tìm thẻ IMG trong code author box (bạn tìm <img expr:src='data:post.authorPhoto.url' itemprop='image' sẽ ra cái thẻ đó) sau đó đổi giá trị width trong thẻ đó đi.
6. Lưu mẫu lại.

#Tùy biến style 2

Tùy biến style 2

Ở style 2 ta cũng đổi kích thước ảnh đại diện, thêm viền và nền như style 1 nhưng bổ sung thêm cái social bookmark.
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Vì có thêm mây cái nút vào nên code XML của author box có chút thay đổi, bạn tìm code XML của author cũ là :

<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>

Sau khi tìm được, bạn thay thế toàn bộ code trên thành code dưới:

<b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img expr:src='data:post.authorPhoto.url' itemprop='image' width='150px'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
   
          <a class='profile-social-facebook' href='#' title='Follow us on Facebook'><i class='fa fa-facebook'/></a>
   <a class='profile-social-twitter' href='#' title='Follow us on Twitter'><i class='fa fa-twitter'/></a>
   <a class='profile-social-gplus' href='#' title='Follow us on Google Plus'><i class='fa fa-google-plus'/></a>

  </div>
</b:if>

Ok, thế là code XML của author box đã được thay đổi, bây giờ ta tiến hành thêm CSS cho nó

7. Tìm thẻ ]]></b:skin>
8. Dán code dưới vào trước thẻ mà bạn vừa tìm

.author-profile{background:#434E52;
  border: #fff solid 1px;
  padding:2px; Font-family:arial;
  }
  .author-profile a.g-profile{font-weight:bold;font-size:200%; color:#fff;padding:5px 0 2px 0;text-decoration: none;}
  .author-profile a.profile-social-facebook{background:#3B5998;}
        .author-profile a.profile-social-twitter{background:#55ACEE;}
  .author-profile a.profile-social-gplus{background:#EB7352;}
  .author-profile a {color:#fff;line-height: 20px;display:inline-block;text-align:center;margin-right:10px;text-decoration: none;}
  .author-profile a i {width:20px;height:20px;line-height:20px;padding:5px;display:block;}
        .author-profile span{padding:1px 0 1px 0px}

9. Để thay đổi kích thước ảnh đại diện bạn tìm thẻ IMG trong code author box (bạn tìm <img expr:src='data:post.authorPhoto.url' itemprop='image' sẽ ra cái thẻ đó) sau đó đổi giá trị width trong thẻ đó đi.
10. Tìm thẻ </head>
11. Dán thẻ dưới vào trên thẻ </head> để cài font Awesome

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' media='all' rel='stylesheet'/>

Nếu trong themplate của bạn đã có rồi thì khỏi cần thêm vào nữa.
12. Như vậy là đã hoàn tất, bạn hãy lưu mẫu lại.
Sau đó bạn truy cập vào một bài viết bất kì để kiểm tra xem author box đã hiển thị chưa