Hôm nay mình giới thiệu tới các bạn 1 thủ thuật: thêm thông tin tác giả ngay bên dưới bài viết cho blogger. Đây là thủ thuật có bạn hỏi mình khi nhìn thấy trên blog của mình và câu hỏi được đặt ra là làm thế nào để đưa được thông tin tác giả chỉ hiển thị sau mỗi bài viết. Thêm thông tin tác giả bài viết làm người đọc ấn tượng hơn về chia sẻ của bạn. Thủ thuật này cũng khá đơn giản và chúng ta chỉ sử dụng CSS + HTML

CODE

#authorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
font-family:verdana;
}
#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
#authorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#authorbox .author_small {
font-style:italic;
}
#authorbox img {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
float:left;
border:4px solid #ff4408;
margin:10px;
padding:0;
}
#authorbox img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(+9deg);
-moz-transform: rotate(-1deg);
}
#authorbox p {
color:#ffffff;
margin:0;
padding:0 10px 10px;
}
#authorbox a {
color:#ff4408;
text-decoration:none;
}

- Tiếp theo tìm đến đoạn



và dán đoạn Code dưới đây ngay sau nó:

Bài viết của Phong Vũ

Hi. Mình là Phong Vũ. Mình chia sẻ những gì mình biết và tham khảo. Hy vọng các bạn tìm được thông tin cần trên site mình. Mong nhận được sự ủng hộ của các bạn
Chúc các bạn vui vẻ !

Kết nối qua: Google + Or Facebook

Trong đó các link được mình bôi thì các bạn tùy chỉnh link của mình nếu muốn người xem blog biết về tác giả qua những site mạng. Tất cả lời văn các bạn thay đổi sao cho phù hợp với bạn
- Lưu mẫu lại và xem kết quả :)