Cách tạo Author Box bắt mắt cho Bloger

Author Box là phần thông tin về người đăng tải bài viết ở dưới cuối mỗi bài. Nếu bạn cũng muốn đặt Author Box để chia sẻ thông tin của mình trên Blog thì có thể làm theo hướng dẫn 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ự.

Ảnh demo

Hướng dẫn cài Author Box cho blogger

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>

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>

</ul>

</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: thuthuat.edu.vn