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

Tăng tương tác Facebook của bạn giúp tiếp cận nhiều hơn
Tự động tăng like bài viết của bạn, giúp nổi bật hơn
Thêm bình luận

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

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é: 


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

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.

FACEBOOK COMMENT

2 GOOGLE COMMENT

Ko cho click chuột phải bất tiện vãi :|

Bạn có thể dùng phím tắt ctrl c để copy :D

● Không Spam link dưới mọi hình thức.
● Comment sẽ được giải đáp trong ngày.
● Chèn ảnh vào comment bằng các chèn link ảnh trực tiếp
● [pre] Code của bạn [pre], dùng cho code