Thứ Tư, 13 tháng 7, 2016

Huớng dẫn tạo khung Thông tin tác giả dành cho Blogger - Blogger Author Box

Trước tiên mới các bạn xem hình ảnh Demo:​

Bước 1: Đầu tiên ta vào phần chỉnh sửa template, và tìm đến đoạn:
Code:
]]></b:-skin>
Sau khi tìm ra vị nó nằm ở đâu, bạn dán đoạn CSS này ở phía trên của nó:
Code:
.author-box{background:#CFCFCF;width:570px border:1px dashed #999; margin-top:20px; overflow:hidden; padding:10px}
.avatar-author{border:1px solid #888; float:left; padding:5px}
.info-author{float:right; width:483px}
.info-author h2{font-size:18px}
Bước 2: Việc đơn giản cuối cùng đó là bạn đưa đoạn code sau đây đến bất cứ chỗ nào mà bạn muốn chèn khung thông tin tác giả:
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                                    <div class='author-box'>
                                        <b:if cond='data:post.author == &quot;Thay tên tác giả vào đây&quot;'>
                                            <img class='avatar-author' height='80' src='Hình tác giả' width='80'/>
                                            <div class='info-author'>
                                                <h2>Thông tin tác giả:<a href='Link website của tác giả' target='_blank'>Tên tác giả</a></h2>
                                                <p>Lời giới thiệu</p>
                                            </div>
                                        </b:if>
                                    </div>
                                </b:if>
Thường thì đoạn code Thông tin tác giả này được chèn ở 1 trong những đoạn sau trong template của bạn:
Code:
<div class='post-footer-line post-footer-line-1'>
Hoặc
Code:
<div class='post-footer-line post-footer-line-2'>
Hoặc
Code:
<div class='post-footer-line post-footer-line-3'>
Hoặc nếu template của bạn không có 3 đoạn trên, thì chèn vào dưới đoạn:
Code:
<data:post.body/>


Lưu 1 số điều:

Phần thay tên tác giả vào đây là bạn sẽ chèn tên profile của tác giả đó vào, nếu bạn điền không đúng tên thì khung tác giả sẽ không xuất hiện.
Cứ mỗi 1 tác giả là bạn phải tạo 1 đoạn code riêng, và điền đầy đủ info, link, avatar của người vào.
Tùy vào mỗi template, bạn có thể tùy chỉnh bố cục màu sắc của khung tác giả tùy theo ý thích ở phần CSS nhé!


Chúc các bạn thành công!!! 

Related Posts:

  • Hướng dẫn tạo hiệu ứng hoa mai rơi tuyết rơi lá rơi cho Blogger Hôm nay mình hướng dẫn các bạn hiệu ứng hoa mai rơi giúp cho blog của bạn trở nên đẹp hơn trong không khí ngày Tết cổ truyền của dân tộc. Ngoài ra các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu)… Read More
  • Tạo Style khung bình luận bài viết cực đẹp cho Blogspot Đây là một style dành cho khung nhận xét mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tá… Read More
  • Tạo phân trang page navigation cho BloggerHôm nay mình xin tiếp tục chia sẻ các bạn thanh điều hướng page navigation, nó sẽ giúp các bạn đánh số trang bài viết có trên trang chủ của mình, rất quan trọng nếu blog của bạn có số lượng bài viết lớn. Thanh điều h… Read More
  • Tạo Style top bài viết cực đẹp cho BlogspotBài viết hướng dẫn bạn Tạo Style top bài viết cực đẹp cho Blogspot có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS… Read More
  • Tạo hiệu ứng ứng tuyết rơi cho Blogger Hướng dẫn tạo hiệu ứng ứng tuyết rơi cho Blogger/Website cực tuyệt đẹp. Hiệu ứng này với ưu điểm khá đơn giản tối ưu tốc độ tải trang của bạn. Bạn truy cập blogger.com → Mẫu → Chèn đoạn Code sau vào bên trên thẻ… Read More

0 nhận xét:

Đăng nhận xét