Tạo và tùy biến khung Author dưới bài viết Blogspot

Loading...

Có rất nhiều templates mà người thiết kế chia sẻ đã có sẵn khung Author và người dùng template đó chỉ việc chỉnh sửa thông tin author bên dưới bài viết thành của mình. ITViet360 cũng đã chia sẻ khá nhiều mẫu của khung Author và được nhiều bạn đọc, người dùng Blog áp dụng. Với bài viết này mình chia sẻ với bạn cách tạo và tùy biến thật dễ đối với khung Author này.
Xem thêm: Thêm thông tin tác giả dưới bài viết

Theo yêu cầu của Blog chữa trị bệnh viêm khớp thì mình có tùy chỉnh thêm 1 số để lấy dữ liệu từ Blog.
Tuy nhiên bài viết sẽ liệt kê tất cả những tùy biến của khung Author này.
CÁC BƯỚC THỰC HIỆN
Bước 1: Đăng nhập vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

.author-box{background:#CFCFCF;width:630px 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:515px} .info-author h2{font-size:18px}

Bạn lưu ý ở 2 kích thước chiều rộng nhé, tùy theo mỗi template có chiều rộng body khác nhau. Để xác định chính xác nhất chiều rộng Body của template của bạn thì View Source

Bước 3: Tìm tới 1 trong những đoạn bên dưới
Đoạn 1:<div class='post-footer'>
Đoạn 2:<div class='post-footer-line post-footer-line-1'>
Đoạn 3:<div class='post-footer-line post-footer-line-2'>
Đoạn 4:<div class='post-footer-line post-footer-line-3'>
Và dán 1 trong những code tùy chỉnh dưới đây ngay sau nó.
TÙY CHỈNH 1 tại Demo: chữa trị bệnh viêm khớp cho chúng ta lấy hình ảnh và tên bài viết vào khung.

<!-- Tac gia blog hướng dẫn bởi itviet360 -->
<div class='author-box'>
<img class='avatar-author' expr:alt='data:blog.pageName' expr:src='data:blog.postImageThumbnailUrl' expr:title='data:blog.pageName' height='80' width='80'/>
<div class='info-author'> <b><a expr:href='data:post.url' expr:title='data:post.title'><span itemprop='name'><data:blog.pageName/></span></a></b>
<p>Bạn đang xem bài viết:&quot;<b style='font-size: 14px;'><data:blog.pageName/></b>&quot; tại trang thông tin <b>Bệnh viêm khớp</b> </p>
  - Hãy để lại <b>Bình luận</b> bài viết hoặc Email cho BQT để đóng góp ý kiến, nhận xét của bạn. Xin cảm ơn!
</div></div>
<!-- Ket thuc -->


TÙY CHỈNH 2: Tại blog Thủ thuật Blogspot

<!-- Tac gia blog -->
<div id='authorbox'>
<img alt='' height='100' src='https://lh6.googleusercontent.com/-TSt_oUDJHrY/UxD1bmWaq6I/AAAAAAAALDY/DwSVGtSKbK8/w532-h534-no/IMG_0946.JPG' width='100'/>
<h4>Mình là Phong Vũ</h4>
  Đến từ <a href='http://seophongvu.com' target='_blank'>công ty SEO</a> Phong Vũ. <p>Bản tính ngoan hiền - thích hoa hồng, yêu màu tím, sống nội tâm, hay khóc thầm nhưng không gay</p> Kết nối qua: <a href='https://plus.google.com/105748308457624309214'>Google +</a> Or <a href='http://www.facebook.com/pit62'>Facebook</a>
</div>
<!-- Ket thuc -->

Chúc các bạn vui vẻ!

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger