Hướng dẫn tạo khung tác giả/ Author cho Blogspot

Khung tác giả là 1 ô thông tin ngắn giới thiệu về tác giả, website blog đó. Mỗi template blogspot thường đều có sẵn khung này, nhưng cũng có 1 số blogspot không có. Vì vậy hôm nay mục đích viết bài này là sẽ hướng dẫn làm khung thông tin cho các template không có sẵn.

Xem demo trước nhé: 

Bây giờ thì bắt đầu làm :D 

Bước 1: Chèn code dưới vào dưới ]]><

.author-box {
  background:#F8F8F8;
  margin-top:8px;
  overflow:hidden;
  border:1px solid #eee;
  border-bottom:3px solid #37B8EB;
  box-shadow:0 1px 3px 0 #B5B5B5;
}

.avatar-author {
  float:left;
  margin-right:3px;
  border:1px solid #FFF;
  padding:5px;
}

.info-author {
  width:100%;
}

.info-author h2 {
  font-size:18px;
  margin:0 !important;
  color:#333;
}

.author-social {
  margin-top:5px;
}

.author-social a {
  opacity:.7;
  margin-left:2px;
}

.author-social a:hover {
  opacity:1;
}

.author-social a img {
  width:25px;
}

Bước 2: Chèn đoạn HTML dưới ở nơi muốn hiễn thị

<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img class='avatar-author' height='100' src='http://www.upsieutoc.com/images/2016/08/06/13724104_10208355869508175_60606223156817640_o.jpg' width='100'/>
<div class='info-author' itemprop='description'>
<h2><i aria-hidden='true' class='fa fa-user'></i> Tác giả: <a href='https://www.facebook.com/' target='_blank'><span itemprop='name'> Tên quản trị viên <i aria-hidden='true' class='fa fa-check-circle'></i></span></a></h2>
<p>Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.</p>
</div>
<div class='author-social'>
<a href='https://www.vanthangit.tk' target='_blank' title='Website'><img alt='' src='https://lh5.googleusercontent.com/-bTOvDNpc0Dc/VLTozXJQURI/AAAAAAAAAq0/bGzWE4TNUx0/s32-no/author_site.png'/></a>
<a href='http://twitter.com/' target='_blank' title='Twitter'><img alt='' src='https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png'/></a>
<a href='http://facebook.com/vanthangblog' target='_blank' title='Facebook'><img alt='' src='https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png'/></a>
<a href='https://plus.google.com/' title='Google Plus'><img alt='' src='http://www.upsieutoc.com/images/2016/05/14/Untitled-35f472.png' target='_blank'/></a>
<a href='https://www.youtube.com' target='_blank' title='Youtube'><img alt='' src='https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png'/></a>
<script src='https://apis.google.com/js/platform.js'>
  {lang: 'vi'}
</script>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
</div>
</div>

Bước 3:Chỉnh sửa lại thông tin, Lưu mẫu lại và vào trang xem.

• Xem thêm thủ thuật Blogspot/Blogger
• Chúc các bạn thành công. Nếu có thắc mắc thì comment phía dưới.