Laman

Pages

Laman

Jan 19, 2011

Tùy biến liên kết Older Posts, Newer Posts, Home

Như các bạn biết thì cuối mỗi bài viết trên blogspot đều có các liên kết Older Posts (Bài đăng cũ hơn), Home (Trang chủ), Newer Posts (Bài đăng mới hơn). Chúng ta có thể tùy biến để thay đổi các liên kết này theo ý muốn của mình, ví dụ có thể thay bằng dòng text khác hoặc bằng hình ảnh.

Để thực hiện thủ thuật này, chúng ta tiến hành như sau. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đoạn code tương tự như bên dưới.

<b:includable id='nextprev'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Trong đoạn code trên, phân tích kỹ có thể thấy vài điểm như sau:

<data:newerPageTitle/>: đây là phần hiển thị liên kết Newer Posts
<data:olderPageTitle/>: đây là phần hiển thị liên kết Older Posts
<data:homeMsg/>: đây là phần hiển thị liên kết Home

Như vậy để tùy biến các liên kết này, bạn có thể thay 3 dòng code trên lần lượt bằng các dòng text hoặc hình ảnh tương ứng.

Ví dụ thay <data:newerPageTitle/> bằng dòng Next >> hoặc dòng Sau >>
Thay <data:olderPageTitle/> bằng dòng << Prev hoặc dòng << Trước
Thay <data:homeMsg/> bằng dòng < Home >

Hoặc nếu dùng hình ảnh thì thay <data:newerPageTitle/> bằng dòng

<img src='http://img58.imageshack.us/img58/8076/leftxv5.png'/>

Thay <data:olderPageTitle/> bằng dòng

<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>

Và thay <data:homeMsg/> bằng dòng

<img src='http://img260.imageshack.us/img260/6710/homepngrg7.jpg'/>



Ngoài ra nếu rành về CSS, bạn có thể tùy biến đoạn code CSS về các liên kết này trong Template:

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D