Tạo profile cuối bài viết cho blogger

Tạo Panel (profile) về tác giả đặt cuối mỗi bài viết là một cách nhanh nhất, tốt nhất để bạn giới thiệu tới bạn đọc về tác giả của bài viết, người đăng bài viết đó cho blog hay chủ nhân của blog một cách sinh động và trực quan nhất. Và hơn thế nữa nếu blog của bạn có nhiều tác giả thì sao? Điều đó sẽ càng tuyệt vời hơn với thủ thuật này các bạn có thể tạo cho mỗi tác giả một Panel (profile) riêng với thông tin và hình ảnh về mỗi tác giả. Thật thú vị phải không nào? Bây giờ chúng ta cùng thực hiện nhé:

Demo (blog của mình đang dùng cái này luôn)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>

/*  Author box (Khung tac gia)==============================================*/ 
#related-posts{padding:10px 0}
#related-posts li{line-height:1.8em}
#author-box{background:#444343;position:relative;margin:0 -10px;padding:20px;color:#CFCFCF;text-shadow:1px 1px 1px #222}
#author-box img{float:left;margin-right:10px}
#author-box h3{color:#FFE2E2}
#author-box h3 a,#author-box h3 a:visited{color:#FFF;text-decoration:none}
#author-box h3 a:hover,#author-box h3 a:active{text-decoration:underline}
#author-box p a,#author-box p a:visited{padding:0 2px;color:#7F7F7F}
#author-box p a:hover,#author-box p a:active{background:#999;color:#000;text-shadow:1px 1px 1px #DDD}
.about{display:block;background:url(http://lh4.ggpht.com/_u7a1IFxc4WI/TW7ap3guXJI/AAAAAAAAAqI/kiv2E0iEA30/about.png) no-repeat;position:absolute;top:-10px;left:10px;width:48px;height:48px}

Bước 2. Bạn hãy tìm đoạn code sau, mình gọi là đoạn code "A":

<b:includable id='shareButtons' var='post'>

Từ chỗ đoạn code "A", bạn tìm đến đoạn code "B" như sau (ở dưới và gần đoạn code "A" nhất):

</b:includable>

Đoạn code "B" này thường nằm trên đoạn code:

<b:includable id='backlinks' var='post'>

Bạn thêm code ở dưới code "A" hoặc trên code "B" bằng đoạn code sau (gọi là code C):

<b:if cond='data:post.author == &quot;Admin&quot;'>
                                <div id='author-box'>
                                    <img alt='Admin' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFevqSEcXDn-pxQqKfYOO9CQlKYz4CBiY00RYnDjS0Kslb8LvJ6KtW9gt4WYnz15EEvj0kGpM6hVbMTyelT_f9nRF2cVsWJZdPus5CEouPQzFLWiHZBVMQVmtWBYAC3WFdOHugoE6dyuo/s1600/Picture+003.jpg' width='100'/>
                                    <h3>Đăng bởi: <a href='http://vinhs.info'>Quốc Vịnh</a></h3>
                                    <p>- Tôi yêu thích du lịch và viết blog. Mỗi ngày tôi cảm thấy rất vui khi được chia sẻ và gặp gỡ tất cả các bạn tại Vinhs.info</p>
                                    <p>- Hiện tại tôi đang theo học một trường CĐ du lịch. Tôi đang cố gắng học tập để sau này trở thành một hướng dẫn viên.</p>
                                    <span class='about'/>
                                    <div class='clear'/>
                                </div>
                            </b:if>

Cuối cùng, bạn bấm nút Lư mẫu (Save) và ra xem blog để thưởng thức thành quả nào!

*Để thêm một hay nhiều Panel (profile) nữa cho các tác giả khác nhau thì bạn chỉ việc Copy code C ở trên và Paste  nó dưới code C và thay đổi hình ảnh thông tin theo tác giả đó và Lưu lại (Save) là xong.

P/s: Thay link ảnh màu hồng bằng link ảnh của bạn. Thay tên Quốc Vịnh bằng tên mà bạn sử dụng trong hồ xơ (profile) blogger. Các trữ màu tím là nội dung mô tả, giới thiệu về tác giả cũng tùy bạn chỉnh sửa lấy nhé. Và các số màu đỏ là để thay đổi kích thước cho phù hợp với mỗi blog khác nhau.

       Thủ thuật này áp dụng code từ mẫu blog Nexis Blogger Template của Duy Pham. Chúc các bạn thành công nhé! (viết theo yêu cầu của bạn Cuonglsf)

Bản quyền bài viết