Khung Thông Tin Tác Giả Đẹp Cho Blogspot (Box Author)

Như tiêu đề thì hôm nay mình sẽ hướng dẫn các bạn làm một thủ thuật nhỏ để tạo được khung thông tin tác giả(Author) đẹp cho blogspot.Hiện tại thì blogspot của mình cũng đang sử dụng nó.
Đây là ảnh demo trong blog của mình,nhìn đơn giản nhưng khá là đẹp.

Bây giờ ta bắt đầu thực hiện nhé.

1.Code Css

Các bạn vào Mẫu>Chỉnh Sửa Html> Tìm đoạn ]]></b:skin> sau đó dán đoạn code sau đây lên trước nó.

/*Author box by huucuongblog*/
a{text-decoration:none}
.author-box {
background: #F8F8F8;
margin-top: 10px;
overflow: hidden;
padding: 10px;
border: 1px solid #eee;
border-bottom: 3px solid #37B8EB; 
box-shadow: 0px 1px 3px 0px #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: 0px !important;
color: #333;
}
.author-social {
margin-top: 5px;
}
.author-social a {
opacity: 0.7;
margin-left: 2px;
}
.author-social a:hover {
opacity: 1;
}
.author-social a img {
width: 25px;
}

2.Code Html

Các bạn dán đoạn code sau đây vào nơi muốn hiển thị,thường là sau bài viết hoặc có thể là đầu bài viết nếu muốn khác biệt.

<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img class='avatar-author' height='100' src='https://lh3.googleusercontent.com/-e1csy01U2vA/VywPJHUBtjI/AAAAAAAAF0U/27RMM3LgtG4lG4kma-NnWJjQSav-ATNGA/s346/designer.png' width='100'/> <div class='info-author' itemprop='description'> <h2>Tác giả: <a href='https://www.facebook.com/anhcuong.hd93' target='_blank'><span itemprop='name'>Trần Anh Cương</span></a>  <img height='15' src='https://lh3.googleusercontent.com/-stjZmk8C3M8/V5ICIK3sCoI/AAAAAAAAGDE/BYXX8UFSKs4fpHC5uRjR-iXDDVFdvzbSQCL0B/w346-h321/tick-305245__180.png' width='15'/></h2> <p>Thích ngắm gái đẹp và viết lách blog để chia sẻ kiến thức cùng mọi người. Đây là dòng trích dẫn mà tôi thích nhất.<br/>Tình yêu, tình bạn, không phải là cả đời không cãi nhau, mà là cãi nhau rồi vẫn có thể bên nhau cả đời.<br/>Cảm ơn bạn đã ghé thăm blog,chúc bạn một ngày tốt lành.!</p> </div>
<div style='text-align:right'>
<div class='author-social'>
<a href='https://anhcuonghd93.blogspot.com' 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/anhcuong.hd93' 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/anhcuong.hd93' 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/101155643803935251719' title='Google Plus'><img alt='' src='https://lh6.googleusercontent.com/-XDc99hbCGQA/V5H6XS2USNI/AAAAAAAAGCY/-NP-VuhUSpcRZ8ffbgeIM1NnfX3EUih6wCL0B/s32-no/google-plus.png' target='_blank'/></a>
<a href='http://www.linkedin.com/anhcuong.hd93' title='Linkedin'><img alt='' src='https://lh3.googleusercontent.com/-V6MD9_08weI/VLToy7aK5SI/AAAAAAAAAqk/BqWgKEnIY2w/s32-no/author_linkedin.png'/></a> 
<a href='https://www.youtube.com/channel/UCeU9bYsQtpQsIBeiWNtXN2g' target='_blank' title='Youtube'><img alt='' src='https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png'/></a>
<a href='http://pinterest.com/anhcuong.hd93' target='_blank' title='Pintrest'><img alt='' src='https://lh6.googleusercontent.com/-9N92HihQmTs/VLTozCtU73I/AAAAAAAAAqw/LNQXRhjQrbw/s32-no/author_pinterest.png'/></a>
</div>
</div>
</div>

Các bạn thay mấy đoạn mình đã đổi màu trên đoạn code Html kia thành link đích của bạn nhé..
Chúc thành công.!

About Me

Breaking News