Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger ~ blog chia sẻ kiến thức lập trình

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