Giới thiệu bản thân cuối bài viết blogspot

   Đôi khi bạn muốn chia sẻ tới các độc giả một vài điều về bản thân hay một vài mô tả về blog của mình. Hôm nay mình sẽ hướng dẫn các bạn tạo một khung thông tin tác giả đẹp mắt chèn bên dưới bài đăng trong Blogger. Sau đây là các bước thực hiện:

Cách tạo khung author box đơn giản cho blogspot.

Bước 1.1: Tại trang quản trị blog, các bạn vào Mẫu --> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ

 ]]></b:skin>:

/* Author box by webchoban.com */#post-footer-author {width: 90%;height: 67px;
background: #e6e6e6;
border:3px solid #b3b3b3;margin: 8px 0px 8px 0px;
font-family: Arial,Verdana;
}#author-img { /*  Tùy chỉnh avatar */width: 54px;
height: 54px;
background: #fff;
float: left;margin: 7px;
}#author-box {padding-right: 5px;margin: 0px;}#author-box p{ / * Tùy chỉnh phần mô tả * /font-size: 12px;
padding: 10px;
margin: 0;text-align: justify;text-transform: normal;color: #666666;}#author-box a{ / * Tùy chỉnh link * /color: #000fcc;
text-decoration:none;}#autor-box a:hover {
color:#7780ee;
text-decoration:underline;
}

Bước 1.2: Tìm đến dòng <data:post.body/> và chèn vào ngay sau nó đoạn code bên dưới (nếu template của bạn có nhiều hơn 1 dòng trên thì cứ chèn vào từng dòng rồi xem kết quả):

<!--Author box by Tuan porto--><div id='post-footer-author'><div id='author-img'><img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/></div><div id='author-box'><p>Nội dung phần mô tả</p></div><!--/Author box by Tuan porto--></div>

Cập nhật nâng cao (tự động nhận diện ảnh tác giả đăng bài)

- Với những blog có nhiều cộng tác viên thì vấn đề thêm ảnh avatar nếu dùng code ở trên là rất phức tạp và rắc rối cho tác giả, sau đây mình sẽ hướng dẫn các bạn thêm một code tự động cập nhật avatar đơn giản như sau.
2.1. Thêm đoạn bên dưới trước thẻ đóng </head>

<script>//<![CDATA[function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}//]]></script> 

2.2. Trong bước 1.2 ở trên có một đoạn như sau:( nhớ là 1.2 nhé-hôm nay có bạn nhầm 2.1 nên tìm không ra gọi điện cho mình bù lu bù la)

<img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/>

- Bạn hãy thay thế nó thành:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/> 

 - Giờ hãy lưu mẫu lại và kiểm tra kết quả nha.