IKP – Hôm
nay I Khám Phá xin chia sẻ cách tạo một khung tùy biến cuối bài viết trong
blogspot hoặc 1 website.
 |
| Khung author tùy biến cuối bài viết |
Để tạo khung
author này, bạn thực hiện như sau:
* Bước 1: Đăng nhập Blogspot --> Mẫu (Templates) --> Chỉnh sửa HTML (Edit HTML)
(Lới khuyên: Các bạn nên down
toàn bộ code về rồi sửa bằng phần mềm Notepad ++ . Và lưu lại 1 bản gốc để
khôi phục khi quá trình thực hiện gặp lỗi không sửa chữa được.)
- Tiếp đến bạn tìm đoạn code
sau ]]></b:skin>.
- Bạn copy và paste
đoạn code sau trước đoạn mã trên:
.author-box{background:#CFCFCF;width:580px 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:485px} .info-author h2{font-size:18px}
.avatar-author{border:1px solid #888; float:left; padding:5px}
.info-author{float:right; width:485px} .info-author h2{font-size:18px}
Phần in đậm: Width màu đỏ là chiều dài của khung. Width màu xanh là chiều dài phần nội dung. Bạn chỉnh sửa cho phù hợp
với blogspot của mình.
Bước 2: Tìm một trong các đoạn code bên dưới:
<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'>
Rồi thêm đoạn code dưới
đây xuống dưới đoạn code trên (chú ý thay lần lượt chứ không phải thay tất nhé.
Bạn thay từng cái 1 lưu temp lại và ra load lại trang xem nó hiển thị đúng chưa
nếu đúng rồi thì ok đã thành công nhé)
Tới đây bạn sẽ
có 2 lựa chọn:
Lựa chọn 1: Khung author hiển thị ảnh của bạn và tên tác
giả. Copy đoạn code bên dưới
và chèn ngay sau 1 trong 4 đoạn code vừa tìm thấy. (Chú ý là thay lần lần lượt thủ được chưa nhé,
chứ không phải thay hết. Sau mỗi lần thay bạn lưu lại và bấm xem thử. Làm lần
lượt như vậy cho đến khi trang hiển thị như ý muốn.)
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<img class='avatar-author' src='Dán link avatar bạn muốn hiển thị' height='60' width='60'/>
<div class='info-author'> <h2 style='font-size: 14px;'>Tên Tác Giả</h2>
<p>Nội dung mô tả trong khung author</p>
</div></div>
</b:if>
<div class='author-box'>
<img class='avatar-author' src='Dán link avatar bạn muốn hiển thị' height='60' width='60'/>
<div class='info-author'> <h2 style='font-size: 14px;'>Tên Tác Giả</h2>
<p>Nội dung mô tả trong khung author</p>
</div></div>
</b:if>
Lựa chọn 2: Tự động (auto) lấy ảnh và tiêu để bài viết bài
viết để làm khung author. Bạn cũng Copy đoạn code bên dưới và chèn ngay sau 1 trong 4 đoạn code ở
phía trên vừa tìm thấy. ( Bạn cũng làm lần lượt như lựa chọn 1 cho đến khi
trang hiển thị như ý muốn.)
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<img class='avatar-author' expr:alt='data:blog.pageName' expr:src='data:blog.postImageThumbnailUrl' expr:title='data:blog.pageName' height='60' width='60'/>
<div class='info-author'> <h2 style='font-size: 14px;'><a expr:href='data:post.url' expr:title='data:post.title'><span itemprop='name'><data:blog.pageName/></span></a></h2>
<p>Bạn đang xem <b style='font-size: 14px;'><data:blog.pageName/></b> và Nội dung bạn muốn mô tả trong khung author </p>
</div></div>
</b:if>
<div class='author-box'>
<img class='avatar-author' expr:alt='data:blog.pageName' expr:src='data:blog.postImageThumbnailUrl' expr:title='data:blog.pageName' height='60' width='60'/>
<div class='info-author'> <h2 style='font-size: 14px;'><a expr:href='data:post.url' expr:title='data:post.title'><span itemprop='name'><data:blog.pageName/></span></a></h2>
<p>Bạn đang xem <b style='font-size: 14px;'><data:blog.pageName/></b> và Nội dung bạn muốn mô tả trong khung author </p>
</div></div>
</b:if>
Sau khi xong
bạn bấm Lưu lại và tận hưởng thành quả nhé.
(Màu sắc khung author này có khác với màu của ikhampha.com, bạn tùy chỉnh cho hợp với blog của bạn nhé)
(Màu sắc khung author này có khác với màu của ikhampha.com, bạn tùy chỉnh cho hợp với blog của bạn nhé)
Chúc các bạn
thành công!
Nguồn: www.ikhampha.com
Không có nhận xét nào: