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

qc
- - 0 bình luận
CHUYÊN MỤC

HIỆN TẠI CÓ 0 BÌNH LUẬN

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé