Thêm thông tin tác giả dưới bài viết blogspot - thủ thuật [part 1]

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

CÁCH LÀM THỦ THUẬT

- Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) -> Mở rộng mẫu tiện ích ( Expand Widget Templates ) ->
- Tìm tới ]]></b:skin>  và dán Code CSS dưới đây ngay trên nó

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 

<data:post.body/>
và dán đoạn Code dưới đây ngay sau nó:

<!-- Tac gia blog -->
<div id='authorbox'>
<a href='https://plus.google.com/106302543309839480016' rel='author' target='_blank'>
<img alt='' height='100' src='https://lh6.googleusercontent.com/-3vrvZ3jJqk8/UMi-mfXQ3TI/AAAAAAAADm4/8kt6bRrI1Wo/w196-h196-n-k/anh-nen-Phong-Vu%2Bcopy.jpg' width='100'/> </a>
<h4><a href='http://www.itviet360.com/' rel='author' title='Bài viết của tôi'>Bài viết của Phong Vũ</a></h4>
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<br/> Chúc các bạn vui vẻ !<p> Kết nối qua: <a href='https://plus.google.com/106302543309839480016'>Google +</a> Or <a href='http://www.facebook.com/pit62'>Facebook</a></p></div>
<!-- Ket thuc -->
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ả :)

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360