"Tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ trên Blogspot"

(Traidatmui.com) - Theo yêu cầu của bạn baongoc thì mình xin chia sẽ cùng các bạn cách để tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn và trang chủ ở cuối mỗi bài viết trên Blogger. Bạn baongoc yêu cầu mình xóa đi phần "Trang chủ", tuy nhiên sẳn đây mình sẽ hướng dẫn cách để tùy chỉnh luôn các phần nằm cùng nó đó là bài đăng cũ hơn, bài đăng mới hơn. Trong Blogspot thường mặc định phần này là dạng text, ở đây mình sẽ giúp các bạn tùy biến chúng thành hình ảnh hoặc có thể ẩn nó đi nếu bạn muốn.

Hình ảnh minh họa
1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

A. Thay bài đăng cũ hơn, bài đăng mới hơn, trang chủ thành hình ảnh

a. Bạn tìm đến code bên dưới hoặc tương tự
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span></b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span></b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>

b. Thay code vừa tìm được thành code bên dưới
<div class='blog-pager' id='blog-pager'>

<!-- Phần "Bài đăng mới hơn" -->
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="Link ảnh bài đăng mới hơn"/></a>
</span></b:if>

<!-- Phần "Bài đăng cũ hơn" -->
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="Link ảnh bài đăng cũ hơn"/></a>
</span></b:if>

<!-- Phần "Trang chủ" -->
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="Link ảnh trang chủ"/></a>

</div>

Bạn thay các link màu đỏ đậm trong code thành link của các ảnh bài đăng mới hơn, bài đăng cũ hơ, trang chủ tương ứng. Bạn có thể sử dụng các chương trình đồ họa để tạo các ảnh đó, nếu không tạo được bạn có thể sử dụng các ảnh bên dưới tạm


B. Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào.

/* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-newer-link {
display:none;
float:left;
}
/* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
/* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}


5. Sau khi chọn 1 trong 2 tùy chọn trên và thực hiện xong bạn save template lại

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

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

3/08/2012 09:48:00 SA Trả lời

bạn ơi sao mình làm y như vậy mà đến lúc nó lại lỗi hình là sao ạ
demo: http://i1238.photobucket.com/albums/ff498/taphanghai/th_nhchpmnhnh_2012-03-09_004630.png

Admin
3/08/2012 08:25:00 CH Trả lời

@ duatin24h.com: Bạn xem đã thay link ảnh ở trên chưa nhé

10/23/2012 07:53:00 SA Trả lời
Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang