Khi các bạn đọc bài ở một số blog có thể nhận thấy rằng họ thường đặt một Author Box bên dưới bài viết để các đọc giả biết được thông tin về người đã đăng tải bài viết. Nếu như bạn cũng muốn đặt vào blog của mình một Author Box để giới thiệu vài điều về bản thân mình thì hãy sử dụng ngay bộ Author Box đã được Thuthuat.Edu.Vn thiết kế sẵn phía dưới đây.

Author Box cho blogger này được mình làm để tương thích với cả trên phiên bản web và responsive trên mobile. Nhìn chung thì khá đơn giản và không có gì rắc rối nếu như bạn biết một chút về HTML và CSS. Hãy cùng trang trí ngay khung thông tin tác giả được bao gồm các Social button và một chút hiệu ứng đẹp để làm phong phú thêm cho blog của mình nhé. Dưới đây là hình ảnh Demo của thủ thuật này, sau khi thực hiện các bước cài đặt các bạn sẽ có một Author box tương tự.

Bước 1: Đăng nhập vào tài khoản Blogger > Mẫu > Chỉnh sửa HTML.

Bước 2: Tìm đến thẻ đóng ]]></b:skin> và thêm vào trước nó đoạn CSS đã được mình chuẩn bị sẵn phía bên dưới.


/*Start Authox-Box-CSS by Tinhocpro*/
#thp-author-box{
display:block;
background:#fff;
width:100%;
font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
border:1px dashed #ddd;
padding:5px;
margin-top:5px;
}
#thp-author-box .thp-author-avatar{
display:block;
float:left;
}
#thp-author-box .thp-author-avatar img{
display:block;
width:100px;
height:100px;
padding:3px;
border:1px solid #ddd;
margin-right:10px;
}
#thp-author-box .thp-author-name{
display:block;
font-size:18px;
font-weight:bold;
}
#thp-author-box .thp-author-description{
display:block;
}
#thp-author-box .thp-author-description p{
margin:5px 0px;
font-size: 15px;
line-height:1.5em;
text-align:justify;
}
.thp-author-social ul{
margin:0;padding:0;
}
.thp-author-social ul li{
display: inline-block;
float: left;
margin-right: 10px;
text-align: center;
border-radius: 20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border: 3px double #f7f7f7;
}
.thp-author-social ul li:nth-child(1){
background: #333;
}
.thp-author-social ul li:nth-child(2){
background: rgb(57,89,159);
}
.thp-author-social ul li:nth-child(3){
background: rgb(218,72,53);
}
.thp-author-social ul li:nth-child(4){
background: rgb(69,176,227);
}
.thp-author-social ul li:nth-child(5){
background: rgb(231,0,49);
}
.thp-author-social a{
opacity: 0.9;
text-decoration: none;
font-weight:bold;
color:#fff;
display:block;
width: 33px;
height: 20px;
padding: 7px 0 5px 0;
}
.thp-author-social a:hover{opacity: 1.0;}
/* hiệu ứng xoay 360 độ cho chữ social*/
.thp-author-social a:hover{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
/*End Author-Box-CSS by Tinhocpro*/
Bước 3: Tìm đến <div class=’post-footer-line post-footer-line-3′> hoặc tương tự sau đó dán vào ngay sau nó đoạn HTML phía bên dưới đây.

<div id="thp-author-box" itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<div class="thp-author-avatar">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhka22o3tIdA1o9170CmTmkp9PR4HSatoExxkzZBCLfuXPcxMsCBKRmaa82zBG1fLc8ovYvxZQKi2qdczihyphenhyphenIi1U5NgRWLBzmx8cGpqugbCBXezg3yV_pXAM8S07VJXjpScI6F4cHn96s/s320-no/Luffy%252BSwager.png" />
</div>
<div class="thp-author-description">
<span class="thp-author-name" itemprop='name'>
Tác giả: Thương Lee</span>
<p itemprop='description'>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 tiểu sử cần hiển thị.</p>
<div class="thp-author-social">
<ul><li><a href="http://tinhocpro.com" title="My's Homepage" target="_blank">W</a></li>
<li><a href="http://facebook.com/" target="_blank" title="Facebook">F</a></li>
<li><a href="https://plus.google.com/" title="Google Plus">G</a></li>
<li><a href="http://twitter.com/" title="Twitter" target="_blank">T</a></li>
<li><a href="http://www.youtube.com/" title="Youtube" target="_blank">Y</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
Lưu ý: Các bạn cần thay lại hình ảnh, tên tác giả và các liên kết cho phù hợp với các Social icon nhé.
Bước 4: Lưu lại mẫu và kiểm tra ngay trên một bài viết nào đó.

Như vậy là các bạn đã tạo xong Author Box đẹp cho blogger rồi đấy, phần còn lại là sửa đổi các thông tin sao cho phù hợp với blog của bạn. Nếu như có bất kỳ vấn đề nào liên qua đến thủ thuật này có thể để lại comment phía bên dưới mình sẽ giải đáp.

NGUỒN TINHOCPRO.COM