Home »

Hướng dẫn cách tạo và tùy biến khung author cuối bài viết Blogspot

4 tháng 2, 2014

Xìn chào các bạn do có bạn thấy blog mình có cái khung ghi thông tin hay hay dưới cuối bài viết và đã hỏi mình làm sao để tạo được một khung như vậy cuối bài viết vì vậy bittuot.blogspot.com xin viết bài hướng dẫn này cho những ai không biết tạo và muốn tạo 1 cái như mình

Hướng dẫn tạo tùy biến khung author cuối bài viết Blogspot

Để tạo được khung này các bạn làm theo các bước sau

Bước 1: Đăng nhập Blogspot ==> Templates(Mẫu) ==> Edit HTML (chỉnh sửa HTML)

==> Khuyến khích các bạn down toàn bộ code về rồi sửa bằng Notepad ++ . Chú ý trước khi sửa sao lấy 1 bản gốc để tránh trường hợp code lỗi ko khôi phục được

Sau đó các bạn tìm đoạn code sau ]]></b:skin> rồi copy đoạn code dưới lên trên nó

.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}
Phần này bạn chú ý đên các thuộc tính width (hiểu là chiều ngang của khung) chỉnh sửa cho phù hợp vừa với khung blog của bạn nhé

Bước 2:   Tìm một trong các đoạn code 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'>

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é)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'> <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> tại <b>Blog Bít Tuốt. </b>
Đừng quên nhấn <span style='font-weight: bold;color: red;font-size: 18px;'>LIKE </span> và <span style='font-weight: bold;color: red;font-size: 18px;'>Chia Sẻ </span> để ủng hộ Bít Tuốt nếu bài viết có ích !
<br/>Hiện tại mình có nhận <b>làm SEO - làm Adword - Thiết Kế blogspot</b> ai có nhu cầu và muốn cộng tác liên hệ với mình qua mail: <b>Seo.vnpro@gmail.com</b>
</p>
</div></div>
</b:if>
Phần code này mình để nó auto lấy ảnh đại diện của bài viết, tiêu đề bài viết để ghi ra giống như Blog của mình.Nếu các bạn muốn ảnh là ảnh của bạn và tên tác giả là tên bạn thì các bạn làm như sau

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<img class='avatar-author' src='link avatar của bạn muốn hiển thị' height='80' width='80'/>
<div class='info-author'> <h2 style='font-size: 14px;'>Tên Tác Giả</h2>
<p>Nội dung mô tả bên dưới bạn muốn viết gì thì viết.</p>
</div></div>
</b:if>
Các bạn lưu lại hay up code lên vậy là ok

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

Nguồn được viết bởi: bittuot.blogspot.com
Tags: , ,

Comments[ 0 ]


Đăng nhận xét