☰ Menu
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.Hướng dẫn tạo Author Box đẹp cho blogger
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 ]]>
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 ]]>
/*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 hoặc tương tự sau đó dán vào ngay sau nó đoạn HTML phía bên dưới đây.
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.
Tag Cloud
Partner linking: Download PES 2015 Góc Mobile
Bài đăng
Lưu ý:
1. Vui lòng ghi rõ tiếng việt có dấu khi gửi phản hồi.
2. Nội dung phản hồi liên quan đến bài viết ở trên.
3. Không dùng những lời lẽ thô tục, khích bác gây ảnh hưởng đến người khác.
4. Vui lòng không gửi tin rác (spam) lên trang của chúng tôi.
5. Nếu cá nhân vi phạm những điều trên đây phản hồi sẽ bị xóa bỏ ngay khi xét duyệt.
Trân trọng,
Bad Man