Hướng dẫn tùy biến thông tin tác giả cuối bài viết.

Thủ thuật này có khá nhiều blogger hướng dẫn. Hôm nay mình cũng xin viết lại thủ thuật này nhưng với một giao diện hoàn toàn khác do mình thiết kế để có thêm lựa chọn cho mọi người.

Preview

1. Vào thiết kế → chỉnh sửa HTML → mở rộng mẫu tiện ích và chèn đoạn code sau vào trước thẻ ]]></b:skin>

.author-box {padding:15px; line-height:22px;border-radius:20px 0;
font-family :georgia; /* Kiểu chữ trên khung thông tin */
font-size:14px; /* Cỡ chữ trên khung thông tin */
box-shadow: 1px 1px 2px 2px #666;
-moz-box-shadow: 1px 1px 2px 2px #666;
-webkit-box-shadow: 1px 1px 2px 2px #666;
}
.author-avatar {float:left; margin:0 15px 15px 0;border-radius:10px 0; padding:5px;
box-shadow: 1px 1px 2px 2px #666;
-moz-box-shadow: 1px 1px 2px 2px #666;
-webkit-box-shadow: 1px 1px 2px 2px #666;
height:50px; /* Chiều cao avatar */
width:50px; /* Chiều rộng avatar */
}
.author-inf a {padding: 1px 5px; display: inline; border-radius:2px; margin:5px;
background: #fff; /* Màu nền của liên kết đến blog, facebook... */
}
.author-inf a:hover {
background: #ccc; /* Màu nền khi rê chuột vào của liên kết đến blog, facebook... */
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5)}

2. Tìm đoạn code sau:

<div class='post-footer-line post-footer-line-3'/>

3. Chèn vào bên dưới đoạn code ở bước 2 đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/8327430152519111955&quot;'>
<div class='author-box'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihlchChZWaZh_szBC7A-syKUPU__LfGHSUxlL4S9eqBtbLhlW1iGzE4pSxu6E6wc0UC2y2HOno8SKMu_HaQBWAU0lsVoO4v75d0SvoG3xJZx26UXazwHKdbDDLJ3DqpzbUH1VyBx5Ekgs/s220/16-4.jpg' width='50'/></div>
Tác giả bài viết: <a href='http://www.blogger.com/profile/8327430152519111955' target='_blank'>K3nvil</a><br/>

Nội dung giới thiệu về tác giả.

<div class='author-inf'>
Thông tin liên hệ:
<a href='http://k3nvil.blogspot.com/' target='_blank'>K3nvil Blog</a>
<a href='ymsgr:sendIM?mr.k3nvil'>Yahoo</a>
<a href='http://www.facebook.com/mr.k3nvil' target='_blank'>Facebook</a>
</div>
</div>
</b:if>
<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/8327430152519111955&quot;'>
<div class='author-box'>
<div class='author-avatar'><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihlchChZWaZh_szBC7A-syKUPU__LfGHSUxlL4S9eqBtbLhlW1iGzE4pSxu6E6wc0UC2y2HOno8SKMu_HaQBWAU0lsVoO4v75d0SvoG3xJZx26UXazwHKdbDDLJ3DqpzbUH1VyBx5Ekgs/s220/16-4.jpg' width='50'/></div>
Tác giả bài viết: <a href='http://www.blogger.com/profile/8327430152519111955' target='_blank'>Suni</a><br/>

Nội dung giới thiệu về tác giả.

<div class='author-inf'>
Thông tin liên hệ:
<a href='http://sunivo.blogspot.com/' target='_blank'>Angel's World</a>
<a href='ymsgr:sendIM?YahooID'>Yahoo</a>
<a href='http://www.facebook.com/yourusername' target='_blank'>Facebook</a>
</div>
</div>
</b:if>
</b:if>