Thứ Ba, 9 tháng 8, 2016

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.

Subscribe box

Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ NCQ BLOG hoàn toàn miễn phí qua Gmail!

0 nhận xét: