Khung thông tin tác giả style wordpress cho blogspot

Dưới đây là style author box đẹp trên nền tảng wordpress tôi thấy khá đẹp để thêm vào blogger giúp blog của bạn thêm đẹp hơn, dạng box info tác giả chỉ với css và html tích hợp nên khá basic và nhẹ nhàng.

Author box style wordpress cho blogspot

Bạn có thể xem demo như hình dưới đây:

Để thêm author box style wordpress này vào blog bạn tiến hành như sau:

1. Tạo trang 404 thân thương cho blogger/blogspot
2. Hướng dẫn cách tạo form liên hệ ở trang tĩnh blogspot
3. Cách setting DNS cho Blogspot lâu dài không bị chặn

Coppy đoạn css sau và đặt trước </style> hoặc ]]></b:skin>

/*Author box by isharevietnam.blogspot.com*/
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;
}

Tiếp tục sao chép đoạn html sau và đặt ở nơi nào bạn muốn box thông tin tác giả xuất hiện.

<div class="author-box" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<img class="avatar-author" height="100" src="https://lh3.googleusercontent.com/-A0UygE-G1e4/AAAAAAAAAAI/AAAAAAAAPO0/R9VTXriRBKM/s120-c/photo.jpg" width="100"><div class="info-author" itemprop="description"><h2>Tác giả: <a href="https://isharevietnam.blogspot.com" target="_blank"><span itemprop="name">Akatsuki</span></a></h2><p>Lao động hăng say, tình yêu sẻ đến...</p></div>
<div class="author-social">
<a href="https://isharevietnam.blogspot.com" title="Website" target="_blank"><img alt="" src="https://lh5.googleusercontent.com/-bTOvDNpc0Dc/VLTozXJQURI/AAAAAAAAAq0/bGzWE4TNUx0/s32-no/author_site.png"></a>
<a href="http://twitter.com/" title="Twitter" target="_blank"><img alt="" src="https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png"></a>
<a href="http://facebook.com/isharevietnam.blogspot.com" 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/+tips24hnet" title="Google Plus"><img alt="" src="https://lh6.googleusercontent.com/-FwUnAvnCh2Q/VKNNdWphKWI/AAAAAAABDrk/KvEc7mdV4Qw/s0/Google%252520Plus.png" target="_blank"></a>
<a href="http://www.linkedin.com/" title="Linkedin"><img alt="" src="https://lh3.googleusercontent.com/-V6MD9_08weI/VLToy7aK5SI/AAAAAAAAAqk/BqWgKEnIY2w/s32-no/author_linkedin.png"></a><a href="http://www.youtube.com/" title="Youtube" target="_blank"><img alt="" src="https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png"></a>
<a href="http://pinterest.com/" title="Pintrest" target="_blank"><img alt="" src="https://lh6.googleusercontent.com/-9N92HihQmTs/VLTozCtU73I/AAAAAAAAAqw/LNQXRhjQrbw/s32-no/author_pinterest.png"></a>
</div>
</div>

Nhớ chỉnh sửa url và thông tin lại cho tương xứng với bạn. Nếu có thắc bận bịu gì về khung thông tin tác giả style wordpress cho blogspot này vui miệng đóng góp ý kiến ở mục comment.

Thanks to DongVietBlog