Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Khung thông tin tác giả ( Author Box ) là một widget nhỏ nhưng khá hữu ích, nó giúp người đọc có thể dễ dàng tìm thấy thông tin về tác giả bài viết.

Một số đặc điểm nổi bật

• Dễ dàng sử dụng
• Responsive.
• Button mạng xã hội.
• Giao diện đơn giản.

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mình sẽ sử dụng FontAwesome để tạo icon cho mạng xã hội, nên nếu bạn nào chưa thêm FontAwesome vào Blog thì thêm vào nhé.

Bước 2 : Thêm đoạn code dưới đây vào phía sau thẻ <div class='post-footer'> hoặc bất kì chỗ nào bạn muốn để khung tác giả

<div class="post-author-box">
<div class='post-author-box-content'>
<div class="post-author-box-image">
<img alt="" height="100" src="https://graph.facebook.com/100009580369715/picture" width="100">
</div>
<div class="post-author-box-name">
<h4>Vũ Tiến Anh</h4>
<p>
VuTienAnh.Pro - blog chia sẻ Tổng Hợp
</p>
</div>
</div>
<div class='post-author-box-social'>
<a href='http://fb.com/vutienanh.vn'><i class="fa fa-facebook"></i></a>
<a href='https://twitter.com/vta2901'> <i class="fa fa-twitter"></i></a>
<a href='https://plus.google.com/+Ti%E1%BA%BFnAnh2901/posts'> <i class="fa fa-google-plus"></i></a>
<a href='http://fb.com/vutienanh.vn'> <i class="fa fa-linkedin"></i></a>
<a href='http://fb.com/vutienanh.vn'><i class="fa fa-pinterest"></i></a>
</div>
</div>

Các bạn chỉnh sửa lại các thông tin về tác giả và đường link mạng xã hội cho đúng

Bước 3 : Thêm đoạn code dưới đây vào trên thẻ ]]></b:skin>

.post-author-box-content {border : 1px solid #11A3D4;min-height:100px;padding:15px;border-bottom:none;color:#2D3438;}
.post-author-box-image img {float:left;border-radius:50%;margin-right:35px;width:100px;height:100px;}
.post-author-box-name h4 {color:#11A3D4;font-wight:bold;font-size:20px;margin-top:10px;margin-bottom:0;}
.post-author-box-social {clear:both;background-color:#11A3D4;padding:10px 15px;color:#fff;font-size:20px;}
.post-author-box-social a {margin-right:10px;color:#fff;}
@media screen and (max-width:640px) {
.post-author-box {text-align:center;}
.post-author-box-image img {float:none;margin:0 auto;}
}

Cuối cùng Save template lại. Chúc các bạn thành công